Разница между: первым и: первым ребенком непонятным

У меня есть список ul li

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

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

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

Ответ 1

От официальных документов:

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

Пока :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

Ответ 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

Ответ 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 from above
// <li> Parent ... </li>

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

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

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

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

запрос ниже даст 0 результатов, поскольку <span> не является первым дочерним элементом div.

$("div span:first-child")

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

Ответ 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 возвращает один результат для одного родителя (если есть).

Ответ 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>