JQuery | Multiple ID selectors
Given an HTML document and the task is to select the elements with different ID’s at the same time using JQuery.
Approach:
- Select the ID’s of different element and then use each() method to apply the CSS property on all selected ID’s element.
- Then use css() method to set the background color to pink to all selected elements.
- Display the text which indicates the multiple ID selectors.
Example 1: In this example, the elements of different ID’s are selected and background color of these elements are changed.
<!DOCTYPE HTML> < html > < head > < title > JQuery | Multiple ID selectors </ title > < style > #GFG_DIV { background: green; height: 100px; width: 200px; margin: 0 auto; color: white; } </ style > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;" > </ p > < div id = "GFG_DIV" > This is Div box. </ div > < br > < button onClick = "GFG_Fun()" > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > < script > $('#GFG_UP').text("Click on button to select multiple" + " ID's and change their background-color"); function GFG_Fun() { $("#GFG_UP, #GFG_DIV, #GFG_DOWN").each(function(){ $(this).css("background-color", "pink"); }); $('#GFG_DOWN').text("Background-color of all " + "elements is changed."); } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
Example 2: In this example, the elements of different ID’s are selected and text color of these elements are changed.
<!DOCTYPE HTML> < html > < head > < title > JQuery | Multiple ID selectors </ title > < style > #GFG_DIV { background: green; height: 100px; width: 200px; margin: 0 auto; color: white; } </ style > < script src = </ script > </ head > < body style = "text-align:center;" > < h1 style = "color:green;" > GeeksForGeeks </ h1 > < p id = "GFG_UP" style = "font-size: 19px; font-weight: bold;" > </ p > < div id = "GFG_DIV" > This is Div box. </ div > < br > < button onClick = "GFG_Fun()" > click here </ button > < p id = "GFG_DOWN" style = "color: green; font-size: 24px; font-weight: bold;" > </ p > < script > $('#GFG_UP').text("Click on button to select multiple" + "ID's and change their Text color"); function GFG_Fun() { $("#GFG_UP, #GFG_DIV, #GFG_DOWN").each(function(){ $(this).css("color", "blue"); }); $('#GFG_DOWN').text("Text color of all elements is " + "changed."); } </ script > </ body > </ html > |
Output:
-
Before clicking on the button:
-
After clicking on the button:
jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”.
You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.