Exclusión de elementos con .not()
Domine el método .not() para excluir con precisión elementos específicos de un conjunto coincidente, perfeccionar sus selecciones y evitar operaciones no deseadas sobre determinados elementos.
Exclusión de elementos con .not() es una lección gratuita de jQuery Academy en CoddyKit. Esta es la lección 3 de 3. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de jQuery Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de jQuery Academy incluye 3 lecciones en total.
Introducción a .not()
¡Le damos la bienvenida! En esta lección, aprenderá a dominar el potente método .not() de jQuery. Es fundamental para refinar las selecciones de elementos.
El método .not() permite excluir elementos específicos de un conjunto de elementos coincidentes, lo que proporciona un control preciso sobre los elementos a los que afectan sus operaciones.
Excluir mediante una cadena de selector
La forma más habitual de utilizar .not() consiste en pasar una cadena de selector CSS. jQuery eliminará de la selección actual todos los elementos que coincidan con este nuevo selector.
- Realice primero una selección amplia.
- Después, utilice
.not()para excluir los elementos no deseados.
Esto resulta útil cuando es más sencillo seleccionar 'todo' y especificar después qué desea 'eliminar'.
.not() con un selector de clase
Pruebe este ejemplo. Seleccionaremos todos los elementos div y, después, utilizaremos .not() para excluir los que tengan la clase .special. Solo se aplicarán estilos a los div que no sean especiales.
<!DOCTYPE html>
<html>
<head>
<style>
.red { color: red; }
</style>
</head>
<body>
<div class="box">Item 1</div>
<div class="box special">Item 2</div>
<div class="box">Item 3</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Select all .box divs, then exclude the one with .special
$('.box').not('.special').addClass('red');
});
</script>
</body>
</html>Excluir elementos específicos
Además de una cadena de selector, también puede pasar directamente a .not() un elemento DOM o un objeto jQuery.
Esto resulta práctico cuando ya tiene una referencia al elemento exacto (o a los elementos exactos) que desea excluir de la selección actual.
.not() con una referencia a un elemento
En este ejemplo, seleccionamos todos los elementos de lista (<li>). Después, identificamos un elemento específico mediante su ID (#item2) y utilizamos .not() para excluirlo de nuestra operación de estilo.
<!DOCTYPE html>
<html>
<head>
<style>
.bold { font-weight: bold; }
</style>
</head>
<body>
<ul>
<li>List Item 1</li>
<li id="item2">List Item 2</li>
<li>List Item 3</li>
</ul>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
// Select all <li>, then exclude the specific #item2
$('li').not($('#item2')).addClass('bold');
});
</script>
</body>
</html>Exclusión personalizada con una función
Para aplicar una lógica de exclusión muy dinámica o compleja, puede pasar una función a .not().
- La función se ejecuta para cada elemento del conjunto actual.
- Si la función devuelve
true, ese elemento queda excluido. thishace referencia al elemento DOM actual que se está procesando.
.not() con una función: ejemplo
Aquí queremos aplicar estilos a todos los párrafos excepto a los que contengan la palabra 'exclude'. La función comprueba el contenido de texto de cada párrafo.
<!DOCTYPE html>
<html>
<head>
<style>
.italic { font-style: italic; }
</style>
</head>
<body>
<p>This is a normal paragraph.</p>
<p>This paragraph contains 'exclude'.</p>
<p>Another normal paragraph here.</p>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('p').not(function() {
// Exclude paragraphs containing 'exclude'
return $(this).text().includes('exclude');
}).addClass('italic');
});
</script>
</body>
</html>Encadenar .not() para lograr precisión
Puede encadenar varias llamadas a .not() o combinar .not() con otros métodos de filtrado para crear selecciones muy precisas.
Cada llamada a .not() refina aún más el conjunto actual de elementos y elimina más elementos a medida que avanza. Considérelo como retirar capas de elementos que no necesita.
Cuándo utilizar .not()
.not() resulta especialmente útil en situaciones en las que:
- Tiene una selección inicial amplia y desea eliminar algunos tipos específicos.
- Necesita excluir un elemento del que ya tiene una referencia directa.
- Expresar 'todos excepto estos' hace que el código sea más claro y legible.
Es una forma elegante de centrar la selección sin escribir de antemano selectores negativos complejos.
Comprobación rápida: uso de .not()
Considere el siguiente HTML. ¿Qué fragmento de código jQuery seleccionaría correctamente todos los elementos <p> excepto el que tiene el ID "intro"?
<div>
<p>Paragraph 1</p>
<p id="intro">Introduction</p>
<p>Paragraph 3</p>
</div>Repaso: dominio de .not()
¡Ha aprendido a dominar el método .not() de jQuery!
Hemos visto que .not() es fundamental para refinar las selecciones al excluir elementos según:
- Una cadena de selector CSS (por ejemplo,
.not('.hide')) - Un elemento DOM específico o un objeto jQuery (por ejemplo,
.not(myElement)) - Una función para aplicar una lógica de exclusión personalizada y dinámica.
¡Siga practicando para que sus selecciones jQuery sean más precisas y eficientes!
Aprende JavaScript con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 22
- Lecciones
- 48
Preguntas frecuentes
¿La lección «Exclusión de elementos con .not()» es gratis?
Sí — el texto completo de «Exclusión de elementos con .not()» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de jQuery Academy, actualiza a CoddyKit PRO. El curso de jQuery Academy incluye 3 lecciones en total.
¿Qué aprenderé en «Exclusión de elementos con .not()»?
Domine el método .not() para excluir con precisión elementos específicos de un conjunto coincidente, perfeccionar sus selecciones y evitar operaciones no deseadas sobre determinados elementos. Practicas jQuery Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar jQuery Academy?
No se requiere experiencia previa. jQuery Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 3 de 3.
¿Cuánto tiempo toma la lección «Exclusión de elementos con .not()»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de jQuery Academy?
Sí. Cada lección de jQuery Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Creación de pseudoselectores personalizados
- Filtrado avanzado con .filter()
- Exclusión de elementos con .not()