jquery에서 코드를 사용하지 않으면 코드가 정상적으로 작동하는 이유는 무엇입니까?

Question

저는 jQuery 초보자입니다. 다음은 h1 요소를 첫 번째 단락 아래로 이동시키는 두 개의 코드 스 니펫입니다. 그들은 똑같은 일을합니다.

$('p').eq(0).after(function() { 
return $(this).prev(); 
}); 

및 코드 연습이 바람직하다

$('p').eq(0).after($('h1')); 

? 왜?

미리 도움을 청하십시오.

편집 :

여기에 html이 있습니다.

<article> 
<h1>Post</h1> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. 
</p> 
<p> 
    <span class=co>Lorem ipsum dolor sit amet</span>, consectetur adipisicing elit, sed do eiusmod 
</p> 
<p> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 
    tempor incididunt ut labore et dolore magna aliqua. 
</p> 
</article> 

Answer 1

첫 번째 코드 : 모두 p 요소를 선택하고 첫 번째 요소를 가져온 다음 콜백에서 요소를 반환합니다. 콜백시 this이 선택한 p을 참조합니다. 따라서 console.log은 p 요소를 반환합니다. return은 선택한 요소 앞에있는 요소를 반환합니다. p. 이 경우 선택한 p이 첫 번째 Lorem ipsum입니다. 그리고 이전 요소는 h1입니다. 그런 다음 h1이 반환되고 after()p 요소가 첨부됩니다.

두 번째 코드 :이 특정 경우에도 비슷하게 작동합니다. 하지만 조심해! 이 경우 모든 p 요소를 가져오고 필터링하여 첫 번째 코드 (첫 번째 코드와 같음)를 붙이면 after이 붙습니다. 모두 h1 요소입니다. 당신의 예제 HTML 코드에서 하나의 h1 엘레멘트 만 가지고 있다면 문제가되지 않을 것입니다. 하지만 둘 이상이 있다면 문제가 생길 것입니다!

Answer 2

더 똑똑하고 짧으며 잘 보입니다. 두 번째 대안으로 갈 것입니다.

에 ..

는

$('p').eq(0).after(function() { 
    return $(this).prev(); 
}); 

기존 HTML의 구조가있는 상태를 유지하는 것을 의미 ..would. 두 번째 방법을 사용하면 첫 번째 단락과 h1 사이에 추가 할 수 있으며 여전히 작동합니다.