jQuery : 각 함수를 for 루프로 변환

Question

최근 mouseover 이벤트에서 배경 이미지를 적절한 거리로 움직일 수 있도록 stackoverflow에서 훌륭한 사람들의 도움을 받았습니다. 이것은 훌륭하게 작동하지만, 문제는 각 기능을 얼마나 최적으로 사용하고 있는지 걱정하고 있다는 것입니다.

내가 최적화 혜택에 관심이있어 특정 코드를 for 루프로 변환하는 방법에 대한 간단한 설명을 얻을 수 있기를 기대하지만 변환 방법에 대한 구문의 차이를 제대로 이해하지 못했습니다. 그것을 for 루프로 바꾼다.

var xPosition = -195; 
$('div.style-swatches ul li').each(function(){ 
    $(this).mouseenter(function(){ 
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
    }); 
}); 

Answer 1

단순히 .each()

Demo fiddle

$("div.style-swatches li").mouseenter(function() { 
    $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
}); 

Answer 2

모든 선택 사항은 커버 아래에 for 루프를 사용합니다. 기본적으로 $ (". css-selector")를 보면 "모든 일치하는 요소에 대해"라고 생각할 수 있습니다. 코드에서 .each (...)는 프로세스를보다 명확하게 만듭니다. jQuery를 이미이 자체 않기 때문에, 그것의,

var elems = $('div.style-swatches ul li'); 
for (var i = 0; i < elems.length; ++i){ 
    $(elems[i]).mouseenter(function(){ 
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
    }); 

} 

그러나 다시 당신이 정말로 for 루프로이 탈출하고 싶다면

, 당신은 당신의 선택 직접 다음 인덱스 요소 라를 사용할 수 있습니다 의심스러운 당신은 유익한 성능에 영향을 볼 수 있습니다.

Answer 3

jquery 선택자는 배열을 반환합니다. 이

var xPosition = -195; 
var elements = $('div.style-swatches ul li'); 
for(var i = 0; i < elements.length; i++) { 
    $(elements[i]).mouseenter(function() { 
     $(this).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(this).index() * 195)) + "px 0"); 
    }); 
} 

Answer 4

$를 사용하지 않는에 당신은 ('div.style-견본 UL 리') 반환 및 항목의 배열을 반복 할 수 있습니다. .just it it

var xPosition = -195; 
var items  = $('div.style-swatches ul li'); 

for (var i = 0, l = items.length; i < l; i++) { 
    $(items[i]).mouseenter(function(){ 
     $(items[i]).closest('div.chip-style').find('div.chip-preview').css("background-position", (xPosition - ($(items[i]).index() * 195)) + "px 0"); 
    }); 
} 

Answer 5

벤치 마크 없이는 절대로 최적화하지 마십시오. 먼저 코드를 프로파일 링하고 실제 데이터를 수집하고 어떤 함수 호출이 인지 확인하십시오.은 많은 시간/메모리를 차지하며 은 발견 된 성능 병목 현상을 최적화합니다.

특정 경우에는 DOM 쿼리가 루프 구성보다 몇 시간 더 걸릴 것으로 예상됩니다. 적절한 경우 div.style-swatches ul li을 .style-swatches li으로 변경하는 등 CSS 쿼리를 단순화하는 방법에 대해 생각해보십시오. jQuery 객체의 모든 내용을 래핑하는 대신 원시 DOM을 사용하십시오.

일부 다른 답변은 이미 지적 했으므로 실제로 은 루프를 필요로합니다. .mouseenter()은 이미이를 수행하고 내부적으로 .each() 루프를 사용합니다.