jQuery는 필터링을 위해 효율적으로 최적화하고 여러 요소에 클래스를 추가합니다.

Question

요소 목록을 제공하고 일부 속성으로 필터링하고 적합한 클래스에 클래스를 추가해야합니다. 데이터 세트가 클 수 있기 때문에

, 하나 개의 방법이 주어진다 다른

한다고 가정 listOfElement보다 빠릅니다 및 요소를 많이 구성되어 있다면 난 그냥 궁금하네요 그리고 나는 또한 반환 할 각의 값을 말한다 적격 소자

방법 1 :

for(var i = 0; i < listOfElement.length ; i ++){ 
    if (testing condition) { 
     $(listOfElement[i]).addClass("blah"); 
     selected.push(listOfElement[i]; 
    } 
} 

방법 2 :

selected = listOfElement.filter(...); 
$(selected).addClass("blah") 

,

$ 선택 작업 및 addClass 작업의 성능 비용을 알고 싶습니다. 누군가가 나에게 더 나은 성능을 위해 일부 JavaScript 가이드에 대한 문서를 가리킬 수 있다면 좋을 것입니다 (예 : 숨기기/표시가 DOM 삽입/삭제보다 빠름)

Answer 1

네이티브 JavaScript는 항상 그렇지는 않지만 항상 jQuery보다 빠릅니다 jQuery는 $ 개체를 생성하기 때문에

var selected = listOfElement.filter(function (item) { 
    // ... 
}); 

// Add class 
selected.forEach(function (item) { 
    item.classList.add('blah'); 
    // If you need to support IE 9 or lower: 
    // item.className += ' blah'; // note the space in front of the class name 
}); 

This jsPerf이 관심의 대상이 될 수 있습니다.