How to select an element with multiple classes using jQuery ?
There are two procedures to select an element with multiple classes by using jQuery. Both the procedures are described below with the proper example.
Using filter() Method: By using filter() method we can filter out all the elements that do not match the selected criteria and those matches will be returned.
- Syntax:
$(selector).filter(criteria, function(index))
- Example:
<!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> - Output:
Using .class Selector: By using .class Selector specifies the class for an element to be selected. It should not begin with a number. It gives styling to several HTML elements.
- Syntax:
$(".class1.class2.class3...") - Example:
<!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> - Output:
Please Login to comment...