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 elementwith multiple classes</title><style>h1 {color: green;}body {text-align: center;}</style><scriptsrc=</script></head><body><h1>GeeksforGeeks</h1><h3>Select an element withmultiple classes</h3><divclass="geeks">GeeksforGeeks</div><divclass="geeks geeks1">jQuery</div><divclass="geeks1">Select an element withmultiple classes</div><divclass="geeks1 geeks">Using</div><divclass="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 elementwith multiple classes</title><style>h1 {color: green;}body {text-align: center;}</style><scriptsrc=</script></head><body><h1>GeeksforGeeks</h1><h3>Select an element withmultiple classes</h3><divclass="geeks">GeeksforGeeks</div><divclass="geeks geeks1">jQuery</div><divclass="geeks1">Select an element withmultiple classes</div><divclass="geeks1 geeks">Using</div><divclass="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