jQuery each() 루프 내에서 DOM을 변경하는 경우

Question

each() 루프를 사용할 때 jquery의 동작은 무엇입니까? 그것은이다 : 첫 번째 개체에 대한

1. 보면, 다음 객체를 찾아, 함수를 실행 ...
2. 는 (
3. 다른 이들 각각의 기능을 실행, 컨테이너에있는 모든 개체를 수집하는 것 ? 정확히)

예, 그것은 관련입니다 :

<div id="a"> 
    A 
    <div id="b"> 
     B 
    </div> 
</div> 
<div id="c"> 
    C 
</div> 

나는이 자바 스크립트를 실행하는 경우 :

$('div').each(function(index){ 
    alert($(this).html()); 
    $(this).remove(); 
} 

세 가지 경고가 표시 되나요?

Answer 1

선택에 어떤 작업을 수행하든 관계없이 jQuery는 해당 작업을 적용하기 전에 해당 선택을합니다. 즉, $('div')이 선택기이므로 선택 프로세스는 다른 체인 방법 (예 : each())과 관계없이 발생합니다. 이것은 $()이 메소드를 호출하기 전에 평가되어야하기 때문에 언어의 결과입니다.

페이지에서 세 개의 div가있는 경우 목록에 3 개의 jQuery 객체가 반복 될 준비가되었습니다. 당신은를 수행하여이 증명할 수 : 세 개의 인덱스 배열의 반복되는

따라서

$('div').length 

(0, 1, 2), 당신은 인덱스 1의 다음 반복의 DOM에서 DIV를 제거하는 경우 each() 콜백은 여전히 ​​인덱스에있는 개체에 대한 2. 체크 아웃 증명이 라이브 데모 될 것입니다 :

DEMO :http://jsfiddle.net/marcuswhybrow/HYJa4/

Answer 2

당신은 #에서 설명한대로 jQuery를이 동작하는 2. DIV B는 DIV 안에 있기 때문에,

1. "A < DIV> B </DIV>"
2. "B"
3. "C"

그러나 : 당신은 세 가지 경고를 볼 수 있습니다 A, div A와 함께 제거됩니다. jQuery는 여전히 그것에 대해 알고 있으며 내용을 경고하지만 그 시간까지 이미 제거되었을 것입니다. 따라서 세 가지 경고가 표시 되더라도 하위 요소는 제거되므로 두 개의 제거 만 수행 할 수 있습니다.

Answer 3

2가 답입니다.

jQuery는 일치하는 요소의 목록을 수집 한 다음 목록을 반복합니다.

중요하게 생각하는 한 가지 중요한 점은 아직 처리되지 않은 모든 요소를 ​​제거하지 마십시오. 참조를 찾을 수없는 오류가 발생할 위험이 있습니다.