How to set background color of a particular div in jQuery ?

Last Updated : 05 Jun, 2023

jQuery is one of the powerful libraries of JavaScript that contains many powerful methods for manipulating the DOM or selecting DOM elements and modifying the DOM elements.

In this article, we will set the background color of 4th division to red by adding an appropriate class in jQuery.

Approach: The i^th occurrence of an element in the DOM can be located in the DOM using the eq() method. The eq() method returns the i^thelement of the DOM of that element selected. It considers 0 based indexing.

Syntax:

$('selector').eq(index)

The index is the parameter in the eq() method that can be positive or negative. If it is positive, then it starts from 0. If it is negative, it considers indexing from the end.

Approach 1: Select the body by using jQuery selector. Find the 4th div from the body and then add the class using the addClass() function to the returned jQuery object. Since it is 0 based indexing, we select the div at the 3rd index.

Example: In this example, we are using the above-explained approach.

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;
        }
 
        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;
        }
    </style>
</head>
 
<body>
    <h1> GeeksforGeeks</h1>
    <p>
        How to set the background color 
        of the 4th division red by adding 
        an appropriate class in jQuery?
    </p>
 
    <button id="btn">
        CLICK TO ADD CLASS TO MAKE 4th DIV RED 
    </button>
     
    <div> DIV-1 </div>
    <div> DIV-2 </div>
    <div> DIV-3 </div>
    <div> DIV-4 </div>
    <div> DIV-5 </div>
 
    <script>
        $(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');
            })
        });
    </script>
</body>
</html>

Output:

Approach 2: The following example is implemented by selecting the 4th div of the body using the eq() method and styles using css() method.

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;
        }
 
        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
        }
    </style>
</head>
 
<body>
    <h1>GeeksforGeeks</h1>
    <p>
        How to set the background color
        of the 4th division red by adding
        an appropriate class in jQuery?
    </p>
    <button id="btn">
        CLICK TO ADD CLASS TO MAKE 4th DIV RED
    </button>
 
    <div> DIV-1 </div>
    <div> DIV-2 </div>
    <div> DIV-3 </div>
    <div> DIV-4 </div>
    <div> DIV-5 </div>
    <script>
        $(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'
                });
            })
        });
    </script>
</body>
</html>