How to set background color of all divs in which attribute name ends with ‘geeks’ in jQuery ?

Last Updated : 12 May, 2021

In this article, we will select all HTML div’s with the value of name attribute ending with ‘geeks’ and used CSS background property to set the background color to green.

Syntax: The following syntax can be used to get the above.

$( "div[name$='geeks']" ).css( "background", "green" );

Approach :

Create some tags with some names attribute value ending with ‘geeks.’
Create some normal div tags to differentiate.
Create a button that will call the jQuery method.
Create jQuery method to select all div with name attribute value ending with ‘geeks’ and set the background color to green.

Example 1: This Example has three div tags. Two of them have name attributes with values that ends with ‘geeks,’ and the third is a normal div. When we click on the button, the first two div’s background color will set to green.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
  
    <meta charset="utf-8"> 
    <meta name="viewport" 
        content="width=device-width"> 
  
    <style type="text/css"> 
        button { 
            display: block; 
            margin: 20px 0 0 0; 
        } 
    </style> 
  
    <script> 
        $(document).ready(function () { 
            $('#button').click(function () { 
                $("div[name$='geeks']") 
                    .css("background", "green"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
      
    <div name="Iamgeeks"> 
        <p>This is Division 1</p> 
    </div> 
  
    <div name="geeksforgeeks"> 
        <p>This is Division 2</p> 
    </div> 
  
    <div name="simplediv"> 
        <p>This is Division 3</p> 
    </div> 
    <button id="button"> 
        Click to see the effect 
    </button> 
</body> 
  
</html> 

Output:

Example 2: This example has four div tags. The first, second, and fourth div name attributes end with “geeks”, but the third div name attribute does not end with the “geeks” keyword. That means, the third div’s background will not change.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <script src= 
"https://code.jquery.com/jquery-git.js"> 
    </script> 
  
    <meta charset="utf-8"> 
    <meta name="viewport" 
        content="width=device-width"> 
  
    <style type="text/css"> 
        button { 
            display: block; 
            margin: 20px 0 0 0; 
        } 
    </style> 
    <script> 
        $(document).ready(function () { 
            $('#button1').click(function () { 
                $("div[name$='geeks']") 
                .css("background", "green"); 
            }); 
        }); 
    </script> 
</head> 
  
<body> 
    <h2 style="color:green"> 
        GeeksforGeeks 
    </h2> 
      
    <div name="Iamgeeks"> 
        Name attribute value is Iamgeeks 
    </div> 
      
    <div name="geeksforgeeks"> 
        Name attribute value is geeksforgeeks 
    </div> 
      
    <div name="geekssimplediv"> 
        Name attribute value is geeksSimpleDiv  
        (not ends with geeks) 
    </div> 
  
    <div name="geeks"> 
        Name attribute value is geeks 
    </div> 
      
    <button id="button1"> 
        Click to see the effect 
    </button> 
</body> 
  
</html> 