如何在 jQuery 中设置特定 div 的背景颜色？

jQuery 是强大的 JavaScript 库之一，其中包含许多用于操作 DOM 或选择 DOM 元素和修改 DOM 元素的强大方法。

在本文中，我们将通过在 jQuery 中添加一个适当的类，将第 4 个分区的背景颜色设置为红色。

方法：可以使用 DOM 中的第 i^个元素定位 DOM eq()方法。 eq()方法返回所选元素的 DOM 的^第i^个元素。它考虑基于 0 的索引。

句法：

$('selector').eq(index)

index是eq()方法中的参数，可以是正数也可以是负数。如果为正，则从 0 开始。如果为负，则考虑从末尾开始索引。

方法一：使用jQuery选择器选择body。从正文中找到第 4 个div ，然后使用addClass()函数将类添加到返回的 jQuery 对象中。由于它是基于 0 的索引，我们选择第 3 个索引处的div 。

例子：

HTML

  

    
    
  
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        div {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            border-radius: 5px;
            margin: 5px;
            color: #006600
        }
  
        #btn {
            margin: 2px;
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            color: whitesmoke;
            width: auto
        }
  
        /* The class that turns the div's 
        background colour to red */
        .newClass {
            background-color: red;
            color: white;
        }
    

  

     GeeksforGeeks
    
        How to set the background color 
        of the 4th division red by adding 
        an appropriate class in jQuery?
    
  
    
        CLICK TO ADD CLASS TO MAKE 4th DIV RED 
    
      
     DIV-1 
     DIV-2 
     DIV-3 
     DIV-4 
     DIV-5 
  
    
        $(document).ready(function () {
      
            // Selecting the body using selector
            // finding the 4th div i.e 0 based indexing 
            // adding a class
            $('#btn').click(function () {
                $('body div').eq(3).addClass('newClass');
            })
        });
    

  

输出：

方法二：下面的例子是通过使用eq()方法选择body的第4个div和使用css()方法选择样式来实现的。

HTML

  

    
    
    
  
    
    
    
      
    
        h1 {
            color: #006600;
        }
  
        body {
            text-align: center;
        }
  
        div {
            text-align: center;
            padding: 5px;
            border: 2px solid black;
            border-radius: 5px;
            margin: 5px;
            color: #006600
        }
  
        #btn {
            margin: 2px;
            padding: 5px;
            border: 2px solid black;
            background-color: #006600;
            color: whitesmoke;
            width: auto
        }
    

  

    GeeksforGeeks
  
    
        How to set the background color 
        of the 4th division red by adding 
        an appropriate class in jQuery?
    
  
    
        CLICK TO ADD CLASS TO MAKE 4th DIV RED
    
  
     DIV-1 
     DIV-2 
     DIV-3 
     DIV-4 
     DIV-5 
  
    
        $(document).ready(function () {
  
            // Selecting the body using selector
            // finding the 4th div i.e 0 based indexing 
            // Adding a class
            $('#btn').click(function () {
                $('body div').eq(3).css({ 
                    'background-color': 'red', 
                    'color': 'white' 
                });
            })
        });
    

  

输出：