Icono del sitio Imacreste

Excluir un elemento de una selección JQUERY

En esta ocasión vamos a ver un método que sirve para excluir elementos de una selección con JQUERY, mediante el atributo :not(elemento). No de ja de ser otra forma de seleccionar pero excluyendo los que coinciden con el criterio indicado.

Ejemplos, excluir con :not

<!DOCTYPE html>
<html>
<head>
<title>Excluir elementos en una selección</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:not(ul.dos li)').css({"border":"1px solid red"});
}); 
});
</script>
<style>
*{
width: 100%;
margin: 0 auto; 
} 
</style>
</head>
<body>
<h1 id='miId'>Seleccionar todos los li excepto los de la segunda lista</h1> 
<ul class="uno">
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul> 
<h2>Esto es un encabezado</h2>
<ul class="dos">
<li>
Lista 1
</li>
<li>
Lista 2
</li>
<li>
Lista 3
</li>
<li>
Lista 4
</li>
<li>
Lista 5
</li>
</ul>
<h2>Esto es un encabezado</h2>
<ul class="tres">
<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, el resto es código HTML y CSS.

$('li:not(ul.dos li)').css({"border":"1px solid red"});

En este ejemplo tenemos 3 listados, y le indicamos que seleccione todas excepto las de la lista 2.

Salir de la versión móvil