How to Get the Children of the $(this) Selector

Have you ever thought of how to get the children of the <kbd class="highlighted">$(this)</kbd> selector in JavaScript? If yes, then read on to get the right solution to that issue.

You can use the jQuery find() method to get the descendants of the <kbd class="highlighted">$(this)</kbd> selector.

In the example below, the jQuery code selects the child element <img> applying CSS style on it on the click of the parent element <div>.

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    <style>
      .box {
        padding: 70px;
        border: 8px solid #ccc;
        text-align: center;
      }
      .box img {
        width: 300px;
        border: 5px solid #999;
      }
    </style>
  </head>
  <body>
    <div class="box">
      <img src="/uploads/media/default/0001/05/ba011983828560c9c6aff43876a655d7364933ae.png" alt="w3docs" />
    </div>
    <script>
      $(document).ready(function() {
          $(".box").click(function() {
              $(this).find("img").css("border-color", "blue");
            });
        });
    </script>
  </body>
</html>

Try it Yourself »

In case you want to get only the immediate children of the target element, the <kbd class="highlighted">children()</kbd> method can be used.

This method only traverses a single level down the tree of the DOM. In contrast, the <kbd class="highlighted">find()</kbd> method is capable of traversing down multiple levels to select the descendant elements, such as grandchildren, and so on.

So, the <kbd class="highlighted">children()</kbd> method gets a set of elements, involving the overall unique immediate children of the appropriate set of elements.

Its syntax is the following:

selector.children([selector])

The usage of the <kbd class="highlighted">children()</kbd> method is demonstrated in the example below:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the Document</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <style>
      .green {
        color: green;
      }
    </style>
  </head>
  <body>
    <div>
      <span>Welcome</span>
      <p class="selected">Welcome to W3docs</p>
      <div class="selected">And again welcome</div>
      <p class="biggest">And One Last Time</p>
    </div>
    <script>
      $(document).ready(function() {
          $("div").children(".selected").addClass("green");
        });
    </script>
  </body>
</html>

Try it Yourself »

Description of the Selector Context

In JavaScript, selectors, by default, perform searches inside the DOM, beginning from the document root. An alternative context can be provided by passing a second parameter to the function <kbd class="highlighted">$()</kbd>. For example, $('span', this) limits the search to spans inside the current element, so only those spans receive the additional class.