Using jQuery is there a way to find the farthest (deepest, or most nested) child element?

Matt K

If I have a set of elements:

<div class="start">
    <div>
        <span>Text 1</span>
    </div>
</div>

<div class="start">
    <span>
        <div>
            <span>Text 2</span>
        </div>
        <div>
            <div>
                <span>Text 3</span>
            </div>
        </div>
    </span>
</div>

What is the best way (using jQuery) to retrieve the most nested child elements (in this case the spans "Text 1" and "Text 3") without knowing what the element structure will be beforehand specifically?

Here's a jsFiddle I'm working with.

Also, I apologize if this has been asked before, but I couldn't find anything like this question specifically.

jfriend00

Here's an implementation that uses a treeWalk function I had written earlier and then wraps it in a jquery method that finds the deepest descendant of each item in the passed in jQuery object and returns a new jQuery object containing those nodes.

A solution with recursion and lots of jQuery can be done with lots less code, but it will likely be slower. This is based on a generic native JS tree walk function that walks a tree.

Working demo with more complicated HTML test case than the OP's HTML: http://jsfiddle.net/jfriend00/8tC3a/

$.fn.findDeepest = function() {
    var results = [];
    this.each(function() {
        var deepLevel = 0;
        var deepNode = this;
        treeWalkFast(this, function(node, level) {
            if (level > deepLevel) {
                deepLevel = level;
                deepNode = node;
            }
        });
        results.push(deepNode);
    });
    return this.pushStack(results);
};

var treeWalkFast = (function() {
    // create closure for constants
    var skipTags = {"SCRIPT": true, "IFRAME": true, "OBJECT": true, "EMBED": true};
    return function(parent, fn, allNodes) {
        var node = parent.firstChild, nextNode;
        var level = 1;
        while (node && node != parent) {
            if (allNodes || node.nodeType === 1) {
                if (fn(node, level) === false) {
                    return(false);
                }
            }
            // if it's an element &&
            //    has children &&
            //    has a tagname && is not in the skipTags list
            //  then, we can enumerate children
            if (node.nodeType === 1 && node.firstChild && !(node.tagName && skipTags[node.tagName])) {                
                node = node.firstChild;
                ++level;
            } else if (node.nextSibling) {
                node = node.nextSibling;
            } else {
                // no child and no nextsibling
                // find parent that has a nextSibling
                --level;
                while ((node = node.parentNode) != parent) {
                    if (node.nextSibling) {
                        node = node.nextSibling;
                        break;
                    }
                    --level;
                }
            }
        }
    }
})();

var deeps = $(".start").findDeepest();

deeps.each(function(i,v){
    $("#results").append(
        $("<li>").html($(v).prop("tagName") + " " + $(v).html())
    );
});

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

How do I find the root li of a nested child element using jQuery?

From Dev

How to find the child element on hover using jQuery?

From Dev

add to deepest array child element

From Dev

Find deepest child, :contains(string)

From Dev

jQuery get deepest inner element

From Dev

How to pull out the most deeply nested child from an element in dom using Javascript?

From Dev

Target the deepest nested ul/ol element with css

From Dev

Find number of second child in html element using JQuery

From Dev

jquery find child element is checkbox or not

From Dev

Using getElementById to find child element

From Dev

Using ref to find a nested element

From Dev

Find the deepest and the last li in any li blocks in a ul li list using jquery?

From Dev

Using search to find the deepest node in a tree and then moving it

From Dev

Using search to find the deepest node in a tree and then moving it

From Dev

jQuery find and replace anchor in child element

From Dev

jQuery - Find .attr of the last-child element

From Dev

Most efficient way to insert an element into sorted array and find its index

From Dev

Most efficient way to find list of element text Selenium Python

From Dev

Find the most nested list

From Dev

How to find Position of a child element(number) inside a parent in html using jquery

From Dev

Ember Nested Model: Find and remove child element from model

From Dev

Ember Nested Model: Find and remove child element from model

From Dev

Most efficient way to create an element from any jquery selector string

From Dev

Find li element by its child element id in jQuery or JS

From Dev

JQuery - Unable to find element ID after child element is removed

From Dev

Find li element by its child element id in jQuery or JS

From Dev

Remove div based on child element using JQuery

From Dev

How to make contenteditable to child element using JQuery

From Dev

Find element with most children

Related Related

  1. 1

    How do I find the root li of a nested child element using jQuery?

  2. 2

    How to find the child element on hover using jQuery?

  3. 3

    add to deepest array child element

  4. 4

    Find deepest child, :contains(string)

  5. 5

    jQuery get deepest inner element

  6. 6

    How to pull out the most deeply nested child from an element in dom using Javascript?

  7. 7

    Target the deepest nested ul/ol element with css

  8. 8

    Find number of second child in html element using JQuery

  9. 9

    jquery find child element is checkbox or not

  10. 10

    Using getElementById to find child element

  11. 11

    Using ref to find a nested element

  12. 12

    Find the deepest and the last li in any li blocks in a ul li list using jquery?

  13. 13

    Using search to find the deepest node in a tree and then moving it

  14. 14

    Using search to find the deepest node in a tree and then moving it

  15. 15

    jQuery find and replace anchor in child element

  16. 16

    jQuery - Find .attr of the last-child element

  17. 17

    Most efficient way to insert an element into sorted array and find its index

  18. 18

    Most efficient way to find list of element text Selenium Python

  19. 19

    Find the most nested list

  20. 20

    How to find Position of a child element(number) inside a parent in html using jquery

  21. 21

    Ember Nested Model: Find and remove child element from model

  22. 22

    Ember Nested Model: Find and remove child element from model

  23. 23

    Most efficient way to create an element from any jquery selector string

  24. 24

    Find li element by its child element id in jQuery or JS

  25. 25

    JQuery - Unable to find element ID after child element is removed

  26. 26

    Find li element by its child element id in jQuery or JS

  27. 27

    Remove div based on child element using JQuery

  28. 28

    How to make contenteditable to child element using JQuery

  29. 29

    Find element with most children

HotTag

Archive