Dada una lista de elementos y la tarea es no seleccionar una clase en particular usando JQuery.
- jQuery :not() Selector: Este selector selecciona todos los elementos excepto el elemento especificado.
Sintaxis:
$(":not(selector)")Parámetros: contiene un selector de parámetro único que se requiere. Especifica el elemento que no selecciona. Este parámetro acepta todo tipo de selector.
- Método jQuery not(): este método devuelve elementos que no coinciden con una condición definida. Este método especifica una condición. Se devuelven los elementos que no cumplen la condición y se eliminan los que sí la cumplen. En su mayoría, este método se usa para eliminar uno o más elementos de un grupo de elementos seleccionados.
Sintaxis:
$(selector).not(condition, function(index))
Parámetros:
- condición: Este parámetro es opcional. Especifica una expresión de selector, un objeto jQuery o uno o más elementos que se eliminarán de un grupo de elementos seleccionados.
- función (índice): este parámetro es opcional. Especifica una función para ejecutar para cada elemento en un grupo. Si devuelve verdadero, el elemento se elimina; de lo contrario, el elemento se mantiene.
- índice: Especifica la posición del índice del elemento en el conjunto
Ejemplo 1: en este ejemplo, primero se seleccionan todas las clases de GFG- iniciales y luego se elimina la clase GFG-1 de la selección usando el método .not() .
<!DOCTYPE HTML>
<html>
<head>
<title>
Not class selector in jQuery.
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 id = "h" style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG" style =
"font-size: 15px; font-weight: bold;">
click on button to change the text content
of all classes except GFG-1
</p>
<p class = "GFG-1" style =
"font-size: 15px; font-weight: bold;">
GFG-1
</p>
<p class = "GFG-2" style =
"font-size: 15px; font-weight: bold;">
GFG-2
</p>
<p class = "GFG-3" style =
"font-size: 15px; font-weight: bold;">
GFG-3
</p>
<button id = "button">
Click here
</button>
<p class = "GFG" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$("button").on('click', function() {
$('p[class^="GFG-"]').not('.GFG-1').text("new Content");
$(".GFG").text("Text content changed")
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Ejemplo 2: En este ejemplo, primero se seleccionan todas las clases de GFG- inicial y luego se elimina la clase GFG-1 de la selección usando :not selector .
<!DOCTYPE HTML>
<html>
<head>
<title>
Not class selector in jQuery.
</title>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body style = "text-align:center;">
<h1 id = "h" style = "color:green;" >
GeeksForGeeks
</h1>
<p id = "GFG" style =
"font-size: 15px; font-weight: bold;">
click on button to change the text content
of all classes except GFG-1
</p>
<p class = "GFG-1" style =
"font-size: 15px; font-weight: bold;">
GFG-1
</p>
<p class = "GFG-2" style =
"font-size: 15px; font-weight: bold;">
GFG-2
</p>
<p class = "GFG-3" style =
"font-size: 15px; font-weight: bold;">
GFG-3
</p>
<button id = "button">
Click here
</button>
<p class = "GFG" style =
"color:green; font-size: 20px; font-weight: bold;">
</p>
<script>
$("button").on('click', function() {
$('p[class^="GFG-"]:not(.GFG-1)').text("new Content");
$(".GFG").text("Text content changed")
});
</script>
</body>
</html>
Producción:
- Antes de hacer clic en el botón:
- Después de hacer clic en el botón:
Publicación traducida automáticamente
Artículo escrito por PranchalKatiyar y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA