jQuery select multiple elements; In this tutorial, i am going to show you how to select multiple html elements by id, class, name and tag, etc.
jQuery Select Multiple HTML Elements
There are two ways available to select multiple html elements using jQuery selectors:
- element selector
- * selector
Syntax of jQuery Element Selector
$("element1, element2, element3, ...");
Syntax of jQuery * Selector
Using the above syntax select multiple html elements.
$("*");
Using the above syntax select all html elements.
Paramaters of jquery multiple selector
- element: This parameter is required to specify the html elements to be selected.
Example 1 – jquery select multiple elements by id
See the following example for how to use multiple selector from selected html elements by id:
<!DOCTYPE html> <html> <head> <title>jQuery Multiple Selector</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function() { $(".multiple").click(function(){ $("#m1, #m2, #m3, #m4").css("background-color", "green"); }); }); </script> </head> <body> <center> <h2 style="margin-top: 10px;" id="m1">Welcome to Tutsmake.com</h2> <h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2> <p><span id="m4">Jquery</span></p> <button type="button" class="multiple">Click Me!</button> </center> </body> </html>
Demo for jquery select multiple elements by id
Welcome to LaraTutorials.com
Hello
Hello
Jquery
Example 2 – jquery select All elements by * Selector
This example will demostrate you how to use * selector from selected html elements. * Selector select all html elements.
<!DOCTYPE html> <html> <head> <title>jQuery Multiple Selector</title> <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> <script> $(document).ready(function() { $(".multiple_star").click(function(){ $("*").css("background-color", "green"); }); }); </script> </head> <body> <center> <h2 style="margin-top: 10px;" id="m1">Welcome to Tutsmake.com</h2> <h3 id="m2">Hello</h3> <h2 id="m3">Hello</h2> <p><span id="m4">Jquery</span></p> <button type="button" class="multiple_star">Click Me!</button> </center> </body> </html>
Demo for jquery select All elements by * Selector
Welcome to Laratutorials.com
Hello
Hello
Jquery
When you click on button, at that time it will perform multiple selectors events of jquery and select all html elements.
Be First to Comment