How do I select the innermost element?

Question

In jQuery, how would I descend as far as possible into the HTML tree?

For simplicity, I only have one path going downward.

(related but bonus: how do I find the deepest element with multiple downward paths?)

<html>  
  <table id="table0">  
    <tr>  
      <td id="cell0">  
        <div class"simple">  I want to change this information </div>  
      </td>
    </tr>  
  </table>  
</html>

I want to change the innermost HTML of the cell named cell0 but I don't necessarily know the names of all the classes inside. Is it possible to select this far without knowing these names?

Thanks much!

What would you want to happen if there were two sibling `
` s in the ``? — cdhowie, Nov 15 '10 at 21:26
I know your sample code is just an example, but I feel I should point out that it's invalid HTML since you've got a `` and `` between them.
` without a ` — Spudley, Nov 15 '10 at 21:27
@cdhowie: nondeterministic behavior! Either the first one or last one in the scope of the previous tag would be fine, I figure returning the last one you check is probably easier. — sova, Nov 15 '10 at 21:37
May I ask why you need the innermost element? I can't think of a problem that would require such selection. — gblazex, Nov 15 '10 at 21:37
@galambalaz: Partly curiosity in general, but I have a click-to-edit cell-contents interface at the moment. Adding divs to format the text/overflow properties has been useful, but the interface lets me edit the raw div HTML because it only looks to the level. — sova, Nov 15 '10 at 21:52

score 26 · Accepted Answer · answered Nov 15 '10 at 22:06

For single path just find the element that doesn't have child nodes:

$('body *:not(:has("*"))');

Or, in your more specific case $('#cell0 *:not(:has("*"))');

For multiple paths - what if there are multiple equally nested nodes? This solution will give you an array of all nodes with highest number of ancestors.

var all = $('body *:not(:has("*"))'), maxDepth=0, deepest = []; 
all.each( function(){ 
    var depth = $(this).parents().length||0; 
    if(depth>maxDepth){ 
        deepest = [this]; 
        maxDepth = depth; 
    }
    else if(depth==maxDepth){
        deepest.push(this); 
    }
});

Again, in your situation you probably want to get to table cells' deepest elements, so you're back to a one-liner:

$('#table0 td *:not(:has("*"))');

- this will return a jQuery object containing all the innermost child nodes of every cell in your table.

score 6 · Answer 2 · answered Nov 15 '10 at 21:34

I'd do this through a single recursive function:

// Returns object containing depth and element
// like this: {depth: 2, element: [object]}
function findDeepestChild(parent) {

    var result = {depth: 0, element: parent};

    parent.children().each(
        function(idx) {
            var child = $(this);
            var childResult = findDeepestChild(child);
            if (childResult.depth + 1 > result.depth) {
                result = {
                    depth: 1 + childResult.depth, 
                    element: childResult.element};
            }
        }
    );

    return result;
}

score 2 · Answer 3 · answered Jan 05 '19 at 19:17

This question has a simple and good answer when for jQuery. However, I was looking for an elegant solution without it. Since :has is not supported in any browser yet, I came up with this one here.

Array.from( document.querySelectorAll( 'body *' ) )
  .filter( e => !e.children.length );

score 1 · Answer 4 · answered Nov 15 '10 at 21:30

Well, starting from a basis that you have no idea where this "deepest" node is, you could do something like this:

$.fn.deepest = function() {
  var depth = 0;
  this.find('*').each(function() {
    var d = $(this).parents().length;
    depth = Math.max(d, depth);
  });
  return this.find('*').filter(function() {
    return this.parents().length === depth;
  });
});

Then

var $deepest = $('body').deepest();

would (excepting the 12 bugs probably in my code) would be a jQuery object for the set of deepest elements.

edit — one of my dozen bugs is that this doesn't take into account the depth of the starting node(s) - that'd be a trick to figure out. Might be better to refactor it so that it finds the deepest of the originally-selected list:

$.fn.betterDeepest = function() {
  var depth = 0;
  this.each(function() {
    depth = Math.max(depth, $(this).parents().length);
  });
  return this.filter(function() { return $(this).parents().length === depth; });
});

and to get the deepest on the page you'd do:

var deepest = $('*').betterDeepest();

score 1 · Answer 5 · answered Nov 15 '10 at 21:31

1

With a single path:

var elem = $('#table0'),
    next;
while ((next = elem.children(':first')).length > 0)
  elem = next;
// elem now points to the deepest child of table0

If I get time, I'll update my answer with the code for multiple paths.

answered Nov 15 '10 at 21:31

casablanca

69,683
7
133
150

sweet. I was unaware of the _next_ keyword. – sova Nov 15 '10 at 21:55
1

@sova - There isn't a `next` keyword. Here it is just a variable name. – user113716 Nov 15 '10 at 22:32
@sova: `next` is not a keyword in JavaScript. Since the syntax highlighter on this site supports multiple languages, it sometimes highlights words from other languages. – casablanca Nov 16 '10 at 00:34

score 1 · Answer 6 · answered Nov 15 '10 at 21:34

The first thing I would do is run a depth first search (DFS) and keep track of what level I was at for each node in the DOM.

In order to save having to perform a full DFS every time you want to change something (assuming you'd like to do it multiple times), you could tag each DOM node with its level in the tree as the search is performed. (Then again, you could maybe do this level tagging during the generation of the table?) Once the search is completed and you've determined the deepest node, keep a reference to that node.

From that point, you should be able to quickly update what node is at the deepest level at any given time.

If you’d provide a sample implementation traversing the OP’s tree hierarchy, your answer would be truly outstanding. — dakab, Jun 15 '23 at 06:26

Argimko · Answer 7 · 2016-03-25T16:41:28.497

0

I think, this is shortest sample for you:

$('#cell0 :last').text('new information')

It's really change innermost element, and save tags structure

edited Mar 25 '16 at 16:41

answered Mar 21 '16 at 02:27

Argimko

516
5
12

user113716 · Answer 8 · 2010-11-15T21:39:03.793

Perhaps not the most efficient, but you could do this:

Example: http://jsfiddle.net/5N3Y7/

var selector = 'body > *';
var $next = $(selector);
var $result = $next;

while( $next.length ) {
    $result = $next;
    selector += ' > *';
    $next = $(selector);
}

$result.css('background','orange');

or this:

Example: http://jsfiddle.net/5N3Y7/2/

(The results in the example appear to be at different levels, but this is because the browser is inserting the missing <tbody>.)

var $next = $('body');

while ($next.length) {
    $result = $next;
    $next = $result.children();
}

$result.css('background', 'orange');

rob · Answer 9 · 2010-11-16T19:15:12.940

0

It's not jquery specific, but this recursive solution can be tweaked to do whatever you want.

function findDeepest (elem) {
 var result = {maxDepth: 0, deepestElem: null}
 descend(elem, 0, result);
 if (result.maxDepth > 0)
  alert (result.deepestElem.tagName + " " + result.maxDepth);
 }


function descend(elem, depth, result) {    
 switch (elem.nodeType) {
    case 1: // ELEMENT_NODE
        if (depth > result.maxDepth) {
         result.maxDepth = depth;
         result.deepestElem = elem;
         }
        for (var i=0; i<elem.childNodes.length; i++)
           descend(elem.childNodes[i], depth + 1, result);
        break;
    case 3: // TEXT_NODE
    case 4: // CDATA_SECTION_NODE
    case 5: // ENTITY_REFERENCE_NODE
    case 8: // COMMENT_NODE
        // handle these cases as needed
    break;
    }
}

edited Nov 16 '10 at 19:15

answered Nov 15 '10 at 21:33

rob

9,933
7
42
73

Please explain why your switch statement has only one case – sova Nov 16 '10 at 19:05
Note my comment about "being tweaked", in which case you might want to do other things, for instance handle text nodes, etc. Admittedly it does look a bit weird as it is....but I generally use that form for walking the dom tree. I'll put a comment in there to make it clear... – rob Nov 16 '10 at 19:11

score 0 · Answer 10 · answered Jul 30 '17 at 21:05

Very late to the party, but here's my generic solution.

var elements$ = $(':contains("your text")');
var result = elements$.filter((index, element) => 
        index === elements$.length || 
        ! $.contains(element, elements$.get(index+1))
    );

It's very fast and simple, because jQuery already does all the job for us.

Notice that elements$ is an ordered list of containers, where many contain the next one. Thus the innermost elements are the last element plus all the elements that don't contain the next one.

How do I select the innermost element?

10 Answers10

Linked

Related