Dado un documento HTML que contiene muchos elementos div con clases. Aquí la tarea es seleccionar un div con cierta clase, que no tenga otra clase. Hay dos enfoques para resolver este problema. En uno de ellos usaremos un método y en el otro usaremos no selector.
Enfoque 1: Primero, seleccione el DIV con cierta clase usando jQuery Selector y luego use :not selector para ignorar los elementos de una clase específica.
- Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Select a div with a certain class,
that doesn't have another class.
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.div {
background: green;
height: 50px;
width: 200px;
margin: 0 auto;
color: white;
border: 2px solid black;
}
</style>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>
Click on button to select a div with a certain
class, that doesn't have another class.
</p>
<!-- div elements -->
<div class="first div">
This is first Div
</div>
<br>
<div class="second div">
This is second Div
</div>
<br>
<div class="third div">
This is third Div
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<br>
<p id="geeks">
</p>
<script>
/* main function */
function GFG_Fun() {
/* using the :not selector */
$('.div:not(.first)')
.css("background-color", "#173F5F");
$('#geeks')
.text("DIV Box of class 'first' is not selected.");
}
</script>
</body>
</html>
- Producción:
Enfoque 2: Primero, seleccione el DIV con cierta clase usando jQuery Selector y luego use el método .not() para ignorar los elementos de la clase específica.
- Ejemplo: Este ejemplo implementa el enfoque anterior.
html
<!DOCTYPE HTML>
<html>
<head>
<title>
Select a div with a certain class,
that doesn't have another class.
</title>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
.div {
background: green;
height: 50px;
width: 200px;
margin: 0 auto;
color: white;
border: 2px solid black;
}
</style>
<script src =
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js">
</script>
</head>
<body>
<h1>
GeeksforGeeks
</h1>
<p>
Click on button to select a div with a certain
class, that doesn't have another class.
</p>
<!-- div elements -->
<div class="first div">
This is first Div
</div>
<br>
<div class="second div">
This is second Div
</div>
<br>
<div class="third div">
This is third Div
</div>
<br>
<button onClick="GFG_Fun()">
click here
</button>
<br>
<p id="geeks">
</p>
<script>
/* main function */
function GFG_Fun() {
/* using the .not() method */
$('.div').not('.first')
.css("background-color", "#173F5F");
$('#GFG_DOWN')
.text("DIV Box of class 'first' is not selected.");
}
</script>
</body>
</html>
- Producció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