How to find all divs with a name attribute that contains word ‘geeks’ and sets the background color ?
jQuery contains attribute selectors with the help of which we can select the elements with name attribute as a particular string or select the elements which contain a particular string or begin with a particular string or ends with a particular string or don’t contain a particular string as a name attribute.
In this article, we will learn to find all the divisions with a name attribute that contains the word ‘Beginner’ and sets the background color green using jQuery attribute selectors.
Approach 1: To find the name attribute that contains a particular string, we can use an attribute selector with ~ to select all the elements that contain a word with a name attribute as Beginner.
Syntax:
$("[attribute~='word']");
Example: In this example, we will use the above approach.
HTML Code:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- Including jQuery --> < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" > </ script > < style > h1 { color: #006600; text-align: center; } .bg-green { background-color: #006600; color: white; margin: 2px; border: 2px solid black; } #btn { color: #006600; text-align: center; margin: 10px; } body { text-align: center; } </ style > </ head > < body > < h1 > Beginner for Beginner</ h1 > < button id = "btn" > How to find all the divisions with a name attribute that contains the word 'Beginner' and sets the background color? </ button > < div name = "Beginner for Beginner" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < div name = "gfg" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < div name = "Beginner" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < script > $(document).ready(function () { $('#btn').click(function () { $("div[name~='Beginner']").addClass('bg-green'); }); }); </ script > </ body > </ html > |
Output:
Approach 2: Use * for selecting all divs that contain the word “Beginner” but the difference between the ~ and * is that ~ selects words separated by spaces. For * there need not be any spaces, it can select even a substring.
Syntax:
$("[attribute*='word']");
Example: In this example, we will use the above approach
HTML Code:
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > <!-- Including jQuery --> < script src = "https://code.jquery.com/jquery-3.6.0.min.js" integrity = "sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin = "anonymous" > </ script > < style > h1 { color: #006600; text-align: center; } .bg-green { background-color: #006600; color: white; margin: 2px; border: 2px solid black; } #btn { color: #006600; text-align: center; margin: 10px; } body { text-align : center; } </ style > </ head > < body > < h1 > Beginner for Beginner</ h1 > < button id = "btn" > How to find all the divisions with a name attribute that contains the word 'Beginner' and sets the background color? </ button > < div name = "Beginner for Beginner" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < div name = "gfg" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < div name = "Beginner" > jQuery is one of the powerful libraries of javascript which has many powerful methods that make the manipulation of DOM much simpler using the selectors and makes the interaction with DOM much easier. </ div > < script > $(document).ready(function () { $('#btn').click(function(){ $("div[name*='Beginner']").addClass('bg-green'); }); }); </ script > </ body > </ html > |
Output: