Icono del sitio Imacreste

Selector JQUERY enésimo hijo :nth-child

Vamos a ver como podemos seleccionar el enésimo elemento hijo de su padre, con el comando :nth-child(X). En este caso se selecciona el hijo pasado como parámetro dentro del padre indicado, teniendo en cuenta que el parámetro comienza con el 1, hay muchas funciones de JQUERY que empiezan por 0, ya que respetan el funcionamiento nativo de javascript. Hay que cuidado con estas variaciones por que generan mucha confusión y muchos errores en el desarrollo difíciles de detectar.

Ejemplos, selector :nth-child(X)

<!DOCTYPE html>
<html>
<head>
<title>Selector enesimo hijo</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){ 
$('li:nth-child(2)').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Selector del 2 li</h1> 
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
<h2>Selector del 2 li</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2"> 
<a href=''>Lista 3</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul> 
</body>
</html>

Una vez más, el código necesario es mínimo:

$('li:nth-child(2)').css({"border":"1px solid red"});

Es importante entender que al ser hijo de un padre solo selecciona los hijos de esos padres, por ejemplo si tengo etiquetas dentro de span, section, etc. Puedo seleccionar de una forma muy sencilla todas las etiquetas dentro de spam, pero no del resto.

Salir de la versión móvil