Разница между: первым и: первым ребенком непонятным
У меня есть список 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>