jquery - premium - diferencia entre: primero y: primer hijo no está claro
generatepress woocommerce (5)
estoy teniendo una lista ul li
<ul>
<li>Parent
<ul>
<li>
child1
</li>
<li>
child2
</li>
</ul>
</li>
</ul>
y estoy tratando de usar un selector jQuery(''ul li:first'') y jQuery(''ul li:first-child'') ambos dan el mismo resultado. Esto me confunde sobre la diferencia entre los dos. Hay un ejemplo que aclara la diferencia entre dos selectores
A veces, pero no siempre, el resultado es (y debería) ser el mismo.
Dado su HTML:
jQuery(''ul li:first'').length; // Returns 1
jQuery(''ul li:first-child'').length; // Returns 2
Entonces, puedes ver, que la primera línea está devolviendo solo el primer elemento li .
La segunda línea está devolviendo ambos elementos li que son un first-child de sus padres.
:first devuelve el primero en un conjunto emparejado.
:first-child devuelve elementos que son el primer elemento secundario de su padre.
El primer elemento li en su HTML también es un primer elemento secundario, aunque usar :first-child produce más resultados cuando prueba la propiedad length .
En realidad, podría combinar los dos selectores si solo desea la primera coincidencia que es un primer hijo.
jQuery(''ul li:first-child:first'').length; // Returns one
De tu ejemplo:
$(''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>
Suponiendo que tenemos los tres resultados del primer selector $("ul li") , entonces :first-child filtrará cualquier elemento de esa lista que no sea el primer hijo de su padre. En este caso, <li> child2 </li> se filtra porque es el segundo hijo de un <ul> .
$(''ul li:first-child''); // Returns all li''s that are the first child of any ul
// <li> Parent .. </li>
// <li> child1 </li>
Además, para el selector de primer hijo, el elemento debe ser el primer hijo en el DOM, y no en el conjunto de resultados de jQuery. Por ejemplo, con la estructura dada:
<div>
<h1>First</h1>
<span>Second</span>
<span>Third</span>
</div>
la siguiente consulta arrojará 0 resultados, ya que <span> no es el primer hijo de div.
$("div span:first-child")
Una buena manera de entender al first-child sería pensar en él como un filtro que filtrará cualquier elemento del conjunto de resultados actual, si no es el primer elemento secundario de su elemento primario.
Esta es una ilustración de lo que $("prev next:first") y $("prev next:first-child") realmente seleccionarían:
<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 devuelve solo el primer resultado, mientras que :first-child devuelve un resultado por padre (si existe).
cuando usamos :first selecciona el primer elemento secundario del primer elemento especificado y cuando usamos :first-child selecciona todo el primer elemento secundario del elemento especificado.
$(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>
De los documentos oficiales:
La primera pseudo-clase es equivalente a: eq (0). También podría escribirse como: lt (1). Si bien esto coincide solo con un elemento,: first-child puede coincidir más de uno: uno para cada padre.
Si bien :first coincide solo con un elemento, el selector :first-child puede coincidir con más de uno: uno para cada padre. Esto es equivalente a :nth-child(1) .
Actualizar:
Aquí hay un ejemplo usando :first-child :
Puedes ver su catálogo y editarte tú mismo. Si reemplaza :first-child con :first , solo resaltará la primera palabra allí. Esto es lo que se define para ellos.
Y aquí está el ejemplo usando :first :