CODEWITHSUNDEEP
javascriptjqueryhtml
user1740375
user1740375

Reputation:

How to find deepest element from a HTML tree with a certain class?

I have a menu. When a tree is opened, it gets the class active. I wan't to get the deepest sub-menu of the menu with the class active.

Upvotes: 0

Views: 2445

Answers (2)

HBP
HBP

Reputation: 16063

And a vanilla version :

function deepest (subMenu, select) { 
  return [].slice.call (subMenu.querySelectorAll (select)).reduce (
    function (deepest, el) {
      for (var d = 0, e = el; e !== subMenu; d++, e = e.parentNode);
      return d > deepest.d ? {d: d, el: el} : deepest;
    }, {d: 0, el: subMenu}).el;
 };

call with 

deepest (subMenu, '.active');

where the second parameter selects the elements to be considered.

Tested on a modified version of @Rory's fiddle

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337714

You can use the parents() collection to count the depth of the element and then return the lowest for the specific selector. Try this:

<div>
    1
    <div class="active">1.1</div>
    <div class="active">
        1.2
        <div class="active">
            1.2.1
            <div class="active">1.2.1.1</div>            
        </div>
        <div class="active">1.2.2</div>
    </div>
    <div class="active">1.3</div>
    <div class="active">
        1.4
        <div class="active">1.4.1</div>
        <div class="active">1.4.2</div>
    </div>
    <div class="active">1.5</div>
</div>

var $elems = $('.active'), $deepest, lowestLevel = 0;
$elems.each(function() {
    var depth = $(this).parents().length;
    if (depth > lowestLevel) {
        $deepest = $(this);
        lowestLevel = depth;
    }
});
$deepest.css('border', '1px solid #C00');

Example fiddle

Upvotes: 1

Related Questions