jQuery에서 두 개의 선택자 사이의 차이

Question

jQuery에는 first-child이라는 선택자가 있습니다. 일치하는 요소에서 첫 번째 자식 을 선택합니다. 하지만 first-of-type을 사용하는 경우 first-child 대신에 문제가 없습니다. 그래서 궁금 해서요, 그 차이점은 무엇입니까?

$(function(){ 
    //$('li :first-child').text('some text'); 
    $('li :first-of-type').text('some text'); 
}); 

Answer 1

그냥 문서 (:first-of-type 및 :first-child)를 읽어

:first-child
는 부모의 첫 번째 자식 인 모든 요소를 ​​선택합니다.

:first-of-type
동일한 요소 이름의 형제들 중 최초로 모든 요소를 ​​선택한다.

:first-of-type 선택기 형제 세트 사이에 소정의 이름 (예컨대 span, a 등)의 첫 번째 요소와 일치한다. 귀하의 예는 일치합니다 :

<li> 
    <span>Matches this span</span> <!-- First span amongst siblings --> 
    <a>Matches this a</span>   <!-- First a amongst siblings --> 
    <a>Doesn't match this one</span> <!-- Second a amongst siblings --> 
</li> 

:first-child 선택은 단순히 경기 부모의 첫 번째 자식이됩니다

<li> 
    <span>Matches this span</span> <!-- First child of parent --> 
    <a>Doesn't match this</span>  <!-- Second child of parent --> 
    <a>Nor this</span>    <!-- Third child of parent --> 
</li>