Sometimes, we want to access nested child elements with jQuery.

In this article, we’ll look at how to access nested child elements with jQuery.

How to access nested child elements with jQuery?

To access nested child elements with jQuery, we can use the child element selector.

For instance, we write:

<div id="ParentDiv">
  <div id="SubDiv1"></div>
  <div id="SubDiv2">
    <input>
  </div>
</div>

to add some divs with an input inside.

Then we write:

const el = $('#ParentDiv input');
console.log(el)

to select the input which is in the div with ID ParentDiv.

As a result, el should be the input which is in the div with ID ParentDiv.

Conclusion

To access nested child elements with jQuery, we can use the child element selector.