Seleccionar los elementos pares e impares con JQUERY

Vamos a ver como seleccionar todos los elementos pares e impares de una lista con JQUERY, y en nuestro caso le daremos estilo cuando suceda algo en nuestra web (cuando se haga clic en un texto h1 seleccionaremos los pares y cuando hagamos clic en el h2 seleccionaremos los elementos impares).

El selector :even es el encargado de seleccionar todos los elementos pares de la web, y el elemento :odd se encarga de seleccionar todos los elementos impares.

Ejemplos, selector pares :even y selector impares :odd

<!DOCTYPE html>
<html>
<head>
<title>Selector del último elemento</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(){ 
$('ul li:even').css({"border":"1px solid red"});
}); 
$('h2').click(function(){ 
$('ul li:odd').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Seleccionar elementos PARES</h1> 
<ul>
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul> 
<h2>Seleccionar elementos IMPARES</h1>
<ul>
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
</body>
</html>

Nuevamente el código necesario no es más que una línea para cada selector, el resto es código HTML y CSS.

//elementos pares
$('ul li:even').css({"border":"1px solid red"});

//elementos impares
$('ul li:odd').css({"border":"1px solid red"});

Como puedes comprobar en el ejemplo de abajo da igual donde hagamos clic, selecciona todos los li-s pares y / o todos los elementos impares presentes en el documento HTML.

Ver ejemplo

Ejemplos, selector pares :even y selector impares :odd

Comentarios