如何在jQuery中设置属性名称以'geeks'结尾的所有div的背景颜色？

在本文中，我们将选择所有 HTML div name 属性的值以 ‘geeks’ 结尾，并使用 CSS background 属性将背景颜色设置为green 。

语法：以下语法可用于获得上述内容。

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

方法 ：

• 创建一些带有一些以“geeks”结尾的名称属性值的标签。
• 创建一些普通的div标签来区分。
• 创建一个将调用 jQuery 方法的按钮。
• 创建 jQuery 方法以选择 name 属性值以 ‘geeks’ 结尾的所有 div，并将背景颜色设置为绿色。

示例 1：此示例具有三个div标签。其中两个具有 name 属性，其值以 ‘geeks’ 结尾，第三个是普通的div 。当我们单击按钮时，前两个 div 的背景颜色将设置为绿色。

HTML

  

    
    
  
    
    
  
    
        button {
            display: block;
            margin: 20px 0 0 0;
        }
    
  
    
        $(document).ready(function () {
            $('#button').click(function () {
                $("div[name$='geeks']")
                    .css("background", "green");
            });
        });
    

  

    
        GeeksforGeeks
    
      
    
        This is Division 1
    
  
    
        This is Division 2
    
  
    
        This is Division 3
    
    
        Click to see the effect
    

  

输出：

示例 2：此示例有四个div标签。第一个、第二个和第四个div名称属性以“geeks”结尾，但第三个div name 属性不以“geeks”关键字结尾。这意味着，第三个 div 的背景不会改变。

HTML

  

    
    
  
    
    
  
    
        button {
            display: block;
            margin: 20px 0 0 0;
        }
    
    
        $(document).ready(function () {
            $('#button1').click(function () {
                $("div[name$='geeks']")
                .css("background", "green");
            });
        });
    

  

    
        GeeksforGeeks
    
      
    
        Name attribute value is Iamgeeks
    
      
    
        Name attribute value is geeksforgeeks
    
      
    
        Name attribute value is geeksSimpleDiv 
        (not ends with geeks)
    
  
    
        Name attribute value is geeks
    
      
    
        Click to see the effect
    

  

输出：