Hay dos procedimientos para seleccionar un elemento con múltiples clases usando jQuery. Ambos procedimientos se describen a continuación con el ejemplo adecuado.
Usando el método filter(): Al usar el método filter() podemos filtrar todos los elementos que no coincidan con los criterios seleccionados y se devolverán esas coincidencias.
- Sintaxis:
$(selector).filter(criteria, function(index))
- Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
jQuery | Select an element
with multiple classes
</
title
>
<
style
>
h1 {
color: green;
}
body {
text-align: center;
}
</
style
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Select an element with
multiple classes
</
h3
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
div
class
=
"geeks geeks1"
>jQuery</
div
>
<
div
class
=
"geeks1"
>
Select an element with
multiple classes
</
div
>
<
div
class
=
"geeks1 geeks"
>Using</
div
>
<
div
class
=
"geeks geeks1 geeks2"
>
filter() method
</
div
>
<
script
>
$(document).ready(function(){
$(".geeks").filter(".geeks1").css(
"background-color", "yellow");
$(".geeks.geeks2").filter(".geeks1")
.css("background-color", "green");
});
</
script
>
</
body
>
</
html
>
- Producción:
Usando .class Selector: Al usar .class Selector especifica la clase para que un elemento sea seleccionado. No debe comenzar con un número. Da estilo a varios elementos HTML.
- Sintaxis:
$(".class1.class2.class3...")
- Ejemplo:
<!DOCTYPE html>
<
html
>
<
head
>
<
title
>
jQuery | Select an element
with multiple classes
</
title
>
<
style
>
h1 {
color: green;
}
body {
text-align: center;
}
</
style
>
<
script
src
=
</
script
>
</
head
>
<
body
>
<
h1
>GeeksforGeeks</
h1
>
<
h3
>
Select an element with
multiple classes
</
h3
>
<
div
class
=
"geeks"
>GeeksforGeeks</
div
>
<
div
class
=
"geeks geeks1"
>jQuery</
div
>
<
div
class
=
"geeks1"
>
Select an element with
multiple classes
</
div
>
<
div
class
=
"geeks1 geeks"
>Using</
div
>
<
div
class
=
"geeks geeks1 geeks2"
>
.class Selector Method
</
div
>
<
script
>
$(document).ready(function(){
$(".geeks1").css(
"background-color", "yellow");
$(".geeks").css(
"background-color", "white");
$(".geeks.geeks2").css(
"background-color", "green");
});
</
script
>
</
body
>
</
html
>
- Producción:
Publicación traducida automáticamente
Artículo escrito por SHUBHAMSINGH10 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA