различие между: сначала и: первый ребенок, не ясный
у меня есть список лития ул.
<ul>
<li>Parent
<ul>
<li>
child1
</li>
<li>
child2
</li>
</ul>
</li>
</ul>
и я пытаюсь использовать селектор jQuery('ul li:first') и jQuery('ul li:first-child') оба предоставления того же результата, это делает меня смущенным различием между этими двумя, является там примером, который разъясняет различие между двумя селекторами
3 ответа
Из официальных документов:
Псевдокласс: first эквивалентен к: уравнение (0). Его также можно было бы записать как : lt (1). Хотя это соответствует только одиночный элемент,: first-child может совпадать более чем с одним: по одному для каждого родитель.
В то время как : first соответствует только одному элементу, селектор : first-child может соответствовать более чем одному: по одному для каждого родителя. Это эквивалентно : nth-child (1) .
http://api.jquery.com/first-selector/
Обновление:
Вот пример использования : first-child :
Вы можете просматривать его и редактировать самостоятельно. Если вы замените : first-child на : first , там будет выделено только первое слово. Это то, что для них определено.
А вот пример использования : first :
Иногда, но не всегда, результат будет (и должен) быть таким же.
Учитывая ваш HTML:
jQuery('ul li:first').length; // Returns 1
jQuery('ul li:first-child').length; // Returns 2
Итак, вы можете видеть, что первая строка возвращает только первый элемент li .
Вторая строка возвращает оба элемента li , которые являются первым потомком своего родителя.
: first возвращает первое в согласованном наборе.
: first-child возвращает элементы, которые являются первым дочерним элементом своего родителя.
Первый элемент li в вашем HTML также является первым дочерним элементом, хотя использование : first-child дает больше результатов при проверке свойства length . .
На самом деле вы могли бы объединить два селектора, если вам нужно только первое совпадение, которое является первым дочерним элементом.
jQuery('ul li:first-child:first').length; // Returns one
Из вашего примера:
$('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 отфильтрует любой элемент из этого списка, который не является первым дочерним элементом своего родителя. В этом случае отфильтровывается, поскольку он был вторым дочерним элементом .
$('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 результатов, поскольку не является первым дочерним элементом div.
$("div span:first-child")
Хороший способ понять first-child - представить его как фильтр, который отфильтрует любой элемент в текущем наборе результатов, если он не является самым первым дочерним элементом своего родителя.