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

Question

У меня есть список ul 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

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

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

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

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

Обновление:

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

http://jsbin.com/olugu

Вы можете просмотреть его и редактировать самостоятельно. Если вы замените :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>

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

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

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

$("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>