요소가있는 경우 함수 반환

Question

요소 클래스가 DOM 내에 이미있는 경우 함수를 분할하는 가장 효율적인 방법을 찾고 있습니다. 예를 들어

, 스팬의 클래스가 존재하는 경우, 그 순간에 내가 어떤/다른 경우 오히려 수익보다 사용하여 몇 가지 예를 본 적이

$(function() { 
    //logic will execute 

    if ($(this).find('span.myspan').length) return; 

    //logic will execute if search doesn't find span.myspan 
}); 

를 사용하고 검사합니다. 찾기()를 사용하고 일부 예는 대신 .length의

.find('span.myspan')[0] 

가 존재 확인하는 것은 없다

을 사용했다? 아니면 null과 비교하는 방법?

함수 내에서 요소가 DOM에 있는지 확인하는 가장 효율적인 방법은 무엇입니까? 그렇다면 함수가 즉시 반환됩니다.

Answer 1

사용 바닐라 JS

console.time('t'); 
    document.querySelector('.label-key'); 
    console.timeEnd('t') 
    t: 0.000ms 
    console.time('t'); 
    $('.label-key'); 
    console.timeEnd('t') 
    t: 1.000ms 

Check out jsPerf

또한 그것을 다른 방법으로 주위를 수행합니다. 요소가 존재하지 않는지 확인한 후 처리하십시오. 그것이 단지 그것을 내버려두면.

$(function() { 
    //logic will execute 

    if (! document.querySelector('.label-key');){ 

    //logic will execute if search doesn't find span.myspan 
    } 
}); 

더 스타일의 것.

Answer 2

.length 또는 [0]을 사용하든 다른 방식으로 비어 있지 않은지 확인하는 것은 기본적으로 차이가 없습니다. 중요한 것은 가장 효율적인 방법으로 요소를 검색하는지, 그리고 검색 대상에 따라 달라지는 지 확인하는 것입니다. 여기에 몇 가지 리소스를 작성 효율적인 선택기에 있습니다 .length를 확인

http://www.sitepoint.com/efficient-jquery-selectors/

https://developers.google.com/speed/docs/best-practices/rendering#UseEfficientCSSSelectors