Desde la versión JQUERY 1.9 existen nuevos selectores para facilitar el acceso a los elementos del DOM. En este caso vamos a ver como podemos acceder a los elementos que son el primero con un nombre determinado de etiqueta, el último, y a los elementos que tengan una etiqueta única.
Ejemplos, selectores :first-of-type, :last-of-type y :only-of-type
<!DOCTYPE html>
<html>
<head>
<title>Selectores de elementos con mismo nombre de etiqueta</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.pr:first-of-type').css({"border":"1px solid red"});
});
$('h2').click(function(){
$('li.pr:last-of-type').css({"border":"1px solid red"});
});
$('h3').click(function(){
$('li:only-of-type').css({"border":"1px solid red"});
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id='miId'>Selector del primer elemento con una etiqueta determinada (li.pr)</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 último elemento con una etiqueta determinada (li.pr)</h2>
<ul>
<li>
Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2">
<a href=''></a>Lista 3</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
<h3>Selector del li sin hermanos</h3>
<ul>
<li>
Lista 1
</li>
</ul>
</body>
</html>
De nuevo un código muy sencillo, en primer lugar mostramos todos los li.pr que estén en primer lugar del padre ul, el el segundo los últimos elementos que estén en última posición y tengan el atributo li.pr, y finalmente seleccionamos los elementos que no tengan hermanos dentro de un padre.
//los primeros hijos de los padres que cumplan la condición
$('li.pr:first-of-type').css({"border":"1px solid red"});
//los últimos hijos de los padres que cumplan la condición
$('li.pr:last-of-type').css({"border":"1px solid red"});
//Elementos hijos sin hermanos
$('li:only-of-type').css({"border":"1px solid red"});
Deja una respuesta