Open In App

How to find all divs with a name attribute that contains word ‘geeks’ and sets the background color ?

Improve
Improve
Like Article
Like
Save
Share
Report

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 ‘geeks’ 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 geeks.

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  -->
            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> Geeks for Geeks</h1>
    <button id="btn">
        How to find all the divisions with a name
        attribute that contains the word 'geeks'
        and sets the background color?
    </button>
    <div name="geeks for geeks">
        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="geeks">
        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~='geeks']").addClass('bg-green');
            });
        });   
    </script>
</body>
 
</html>


Output:
 

Approach 2: Use * for selecting all divs that contain the word “geeks” 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  -->
        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> Geeks for Geeks</h1>
    <button id= "btn">
       How to find all the divisions with a name
       attribute that contains the word 'geeks'
       and sets the background color?
   </button>
 
    <div name = "geeks for geeks">
        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 = "geeks">
        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*='geeks']").addClass('bg-green');
            });
        });   
    </script>
</body>
 
</html>


Output:
 



Last Updated : 30 May, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads