추가하기 전에 클래스가 이미 할당되었는지 확인합니다.

추가하기 전에 클래스가 이미 할당되었는지 확인합니다.

jQuery에서 클래스를 추가하기 전에 해당 요소에 클래스가 이미 할당되어 있는지 확인하는 것이 좋습니다.효과가 있을까요?

예:

<label class='foo'>bar</label>

수업이 의심스러울 때baz에 이미 할당되었습니다.label이것이 최선의 접근 방식입니까?

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

아니면 이것으로 충분할까요?

$('label').addClass('baz');

그냥 전화하세요.addClass()jQuery가 당신을 위해 점검을 해줄 것입니다.스스로 확인하면 jQuery가 계속 확인을 실행하므로 작업이 두 배가 됩니다.

콘솔에서 간단히 확인해 봤자 전화가addClass같은 클래스를 가진 여러 번은 안전합니다.

구체적으로 당신은 원본에서 수표를 찾을 수 있습니다.

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

이 질문은 이 질문의 중복으로 표시된 다른 질문에 이어 제 관심을 끌었습니다.

이 답변은 승인된 답변을 약간의 세부 정보와 함께 요약합니다.

불필요한 검사를 피함으로써 최적화하려고 합니다. 이와 관련하여 다음과 같은 사항을 알고 있어야 합니다.

1. JavaScript를 통해 DOM 요소를 조작하여 클래스 속성에 중복된 클래스 이름을 가질 수 없습니다.가지고 계신다면,class="collapse"HTML에서, 호출Element.classList.add("collapse");접기 클래스를 추가하지 않습니다.저는 기본적인 구현 방법은 모르지만, 충분히 좋을 것이라고 생각합니다.
2. JQuery는 그것에 필요한 몇 가지 확인을 합니다.addClass그리고.removeClass구현(소스 코드 확인).addClass확인한 후 클래스가 존재하는 경우 JQuery는 클래스를 다시 추가하려고 하지 않습니다.마찬가지로removeClassJQuery는 다음과 같은 방식으로 무언가를 합니다.cur.replace( " " + clazz + " ", " " );클래스가 있는 경우에만 클래스를 제거합니다.

JQuery는 몇 가지 최적화를 수행합니다.removeClass무의미한 재도전을 피하기 위한 실행.그건 이런 식이다.

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

따라서 기능 호출 오버헤드와 관련 구현 검사를 방지하는 것이 최선의 마이크로 최적화입니다.

이름이 지정된 클래스를 전환하고 싶다고 말합니다.collapse클래스가 추가되거나 제거되는 시기를 완전히 제어할 수 있는 경우 및collapse클래스가 처음에는 없는 경우 다음과 같이 최적화할 수 있습니다.

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

스크롤 위치 변경으로 인해 클래스를 전환하는 경우 스크롤 이벤트 처리를 조절하는 것이 좋습니다.

$("label")
  .not(".foo")
  .addClass("foo");

언급URL : https://stackoverflow.com/questions/7403472/check-if-class-already-assigned-before-adding