разница между: первый и: первый-ребенок не ясно

Question

я имею список уль Li

<ul> 
<li>Parent 
    <ul> 
     <li> 
      child1 
     </li> 
     <li> 
      child2 
     </li> 

    </ul> 
</li> 
</ul> 

и я пытаюсь использовать селектор jQuery('ul li:first') и jQuery('ul li:first-child') и дает тот же результат, это делает меня путать о разница между ними есть пример, в котором разъясняется различие между двумя селекторами

Answer 1

от Официальных Docs:

Первый псевдокласс эквивалентен : eq (0). Он также может быть записан как : lt (1). Хотя это соответствует только одному элементу : first-child может соответствовать более одного: по одному для каждого родителя .

В то время как :first матчей только один элемент, селектор :first-child может соответствовать более чем одному: один для каждого из родителей. Это эквивалентно :nth-child(1).

http://api.jquery.com/first-selector/

Update:

Вот пример использования :first-child:

http://jsbin.com/olugu

Вы можете просмотреть его soruce и редактировать самостоятельно. Если вы замените :first-child на :first, здесь будет выделено только первое слово. Это то, что определено для них.

А вот пример использования :first:

http://jsbin.com/olugu/2

Answer 2

Иногда, но не всегда, результат (и должен) быть одинаковыми.

Учитывая ваш HTML:

jQuery('ul li:first').length; // Returns 1 

jQuery('ul li:first-child').length; // Returns 2 

Таким образом, вы можете видеть, что первая строка возвращается только первый li элемент.

Вторая строка возвращает оба элемента li, которые являются их родителями first-child.

:first возвращает первый в согласованном наборе.

:first-child возвращает элементы, которые являются первым дочерним элементом их родителя.

Первый li элемент в вашем HTML также первый ребенок, хотя использование :first-child приносит больше результатов при тестировании length собственности.

Вы могли бы фактически объединить два селектора, если вы хотите, чтобы первое совпадение было первым ребенком.

jQuery('ul li:first-child:first').length; // Returns one 

Answer 3

Из вашего примера:

$('ul li'); // Returns all 3 li's 
// <li> Parent ... </li> 
// <li> child1 </li> 
// <li> child2 </li> 

$('ul li:first'); // Returns the first li of all matching li's from above 
// <li> Parent ... </li> 

Предполагая, что у нас есть все три результата с первым селектором $("ul li"), то :first-child будет отфильтровывать любой элемент из этого списка, который не является первым ребенком его родители , В этом случае <li> child2 </li> отфильтровывается, потому что это был второй ребенок <ul>.

$('ul li:first-child')​;​ // Returns all li's that are the first child of any ul 
// <li> Parent .. </li> 
// <li> child1 </li> 

Кроме того, для выбора первого ребенка, элемент должен быть самым первым ребенком в DOM, а не в наборе результатов JQuery. Так, например, с заданной структурой:

<div> 
    <h1>First</h1> 
    <span>Second</span> 
    <span>Third</span> 
</div> 

запрос ниже 0 даст результаты, как <span> не первый-ребенок дел.

$("div span:first-child") 

Хороший способ понять first-child бы думать об этом как фильтр, который будет отфильтровывать любой элемент в текущем наборе результатов, если это не очень первый ребенок от его родителей.

Answer 4

Это является иллюстрацией того, что $("prev next:first") и $("prev next:first-child") бы на самом деле выбрать: только

<prev> 
    <next>...</next> // <- both `:first` & `:first-child` 
    <next>...</next> 
    <next>...</next> 
</prev> 
<prev> 
    <next>...</next> // <- only `:first-child` (NOT `:first`) 
    <next>...</next> 
    <next>...</next> 
</prev> 

:first возвращает первый результат, в то время как :first-child возвращает один результат на родителя (если таковые имеются).

Answer 5

При использовании :first он выбирает первый дочерний элемент первого указанного элемента, и когда мы используем :first-child, он выбирает весь первый дочерний элемент указанного элемента.

$(document).ready(function(){ 
 
    $("#btnfirst").click(function(){ 
 
     $("ul li:first").hide(); 
 
    }); 
 
    $("#btnfirstChild").click(function(){ 
 
     $("ul li:first-child").hide(); 
 
    }); 
 
});

<html> 
 
<head> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 

 
</head> 
 
<body> 
 

 
<p>List 1:</p> 
 
<ul> 
 
    <li>Book</li> 
 
    <li>pen</li> 
 
    <li>pencil</li> 
 
</ul> 
 

 
<p>List 2:</p> 
 
<ul> 
 
    <li>Book</li> 
 
    <li>pen</li> 
 
    <li>pencil</li> 
 
</ul> 
 

 
<button Id="btnfirst">:first</button> 
 
<button Id="btnfirstChild">:first-child</button> 
 
</body> 
 
</html>