Get The Deepest Children Of A Node - jQuery Deepest.js

Deepest.js is a super tiny (less than 1kb) jQuery plugin that enables developers to get the deepest children of a DOM element.

It can be helpful when you want to find the innermost elements of a complex HTML structure or when you want to find the elements that are most deeply nested within a container.

How to use it:

1. Download the plugin and place the Deepest.js library after jQuery.

<script src="/path/to/cdn/jquery.slim.min.js"></script>
<script src="/path/to/jquery.deepest.min.js"></script>

2. Call the deepest() function on the element you want to search for the deepest children of.

<div id="example">
  <div class="level1">
    <div class="level2">
      <div class="level3">
        <div class="level4">
          <div class="level5">Deepest Element</div>
        </div>
      </div>
    </div>
  </div>
</div>

let output = $("#example").deepest();
console.log(output);

<!-- Output -->
<div class="level5">Deepest Element</div>

3. Get the deepest p of a DOM element.

<div id="example">
  <ul>
    <li><a href="#">link1</a></li>
    <li><a href="#">link2<p>Deepest P</p></a></li>
    <li><a href="#">link3</a></li>
  </ul>
</div>

let output = $("#example").deepest(p);
console.log(output);

<!-- Output -->
<p>Deepest P</p>

---

This awesome jQuery plugin is developed by martinille. For more Advanced Usages, please check the demo page or visit the official website.