Skip to content
Related Articles

Related Articles

Improve Article

Find all children of each division using jQuery

  • Last Updated : 27 Apr, 2021

In this article, we will see how to find all children of each division element of HTML document.

To find all children in jQuery, you can simply use the .children() method with .css() method.

Methods used:

  • .children(): This method returns all direct children of the selected element.
  • .css(): This method is used to set or return one or more style properties for the selected elements.

Approach:

  • Create the HTML page with various div elements with their children.
  • Using the .children() method, find the children of division element.
  • Using the .css() method, style those children element of division element.

Example:

HTML




<!DOCTYPE html>
<html>
  <head>
    <script src=
    </script>
    <meta charset="utf-8" />
    <meta name="viewport" 
          content="width=device-width" />
  
    <style>
      body {
        text-align: center;
        font-size: 26px;
      }
    </style>
  </head>
  <body>
    <h2 style="color: green">GeeksForGeeks</h2>
  
    <p>This is a paragraph.</p>
  
    <div>
      <p>This is a paragraph within a division.</p>
    </div>
  
    <p>This is another paragraph.</p>
  
    <div>
      This is a <span>span</span
      element within a division.
    </div>
    <script>
      $("div").children()
              .css("background-color", " lightgreen");
    </script>
  </body>
</html>

Output: In this example, first we have found all children of div element and applied background property of CSS. All the children of the division element should be highlighted on the webpage.




My Personal Notes arrow_drop_up
Recommended Articles
Page :