How to find the deepest child of a div with jquery

Question

I'm trying to find the deepest element in the specified divwith jquery. But the code which used is producing the error TypeError: parent.children is not a function.

I found this code from this link

the code is :

function findDeepestChild(parent) {

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

    parent.children().each(         //Here I getting the error TypeError: parent.children is not a function
        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;
}
---------------------------------------------------------------------------------------
        $(document).on('keypress','#sendComment', function(e) {
    if(e.keyCode==13){
        var itemId=$('#findbefore').prev('.snew').attr('id');//
        var item=findDeepestChild(itemId);
        alert(item);
    }
});

And my divs are :

<div id="S04" class="snew" style="display: block;">
    <div class="author-image"></div>
    <span>xyz shared the image xyz</span>
    <div class="s-content">
        <div class="s-message"></div>
        <div class="shpicture">
            <img class="SharedImage" width="100%" height="100%" data-shareid="1" data-alid="1" data-id="1" alt="xyz" src="data:image/jpeg;base64,">
        </div>
    </div>
</div>
<div class="SPcommentbox">
    <div class="comment">
        <div class="commenter-image"></div>
        <div class="addcomment">
            <input class="commentbox" type="text" placeholder="Write a comment...">
        </div>
    </div>
</div>

I need to find the img from these.

please anyone help me .... Thanks ...

Given your markup the `$('#findbefore').prev('.snew')` bothers me just a bit, are there duplicate `$('#findbefore')` ids in there? or is that getting "inserted" into the document at random places? otherwise, just the last `$('.snew:last')` or my preference form of `$('.snew').last()` perhaps? and if there are multiple .snew then the selector `$("#findbefore").prev(".snew")` would return just this last one... — Mark Schultheiss, Mar 05 '13 at 16:32
No, `$('#findbefore')` is added by jquery when user click on comment box — James, Mar 05 '13 at 16:52
I think we need to see the "nesting" form of this to make sense of it - if not nested, then just find the img perhaps? It seems a bit confusing at the moment. — Mark Schultheiss, Mar 05 '13 at 17:07
possible duplicate of [select deepest child in jQuery](http://stackoverflow.com/questions/3787924/select-deepest-child-in-jquery) — the system, Mar 05 '13 at 17:31
I think this is what you're looking for https://github.com/martinille/jquery.deepest.js — Martin Ille, Dec 29 '22 at 03:08

score 1 · Accepted Answer · answered Mar 05 '13 at 16:25

To get the deepest nested elements, use

$("#" + parent).find("*").last().siblings().addBack()

http://jsfiddle.net/6ymUY/1/

you can then get the id data attribute with

item.data("id")

http://jsfiddle.net/6ymUY/2/

full code:

function findDeepestChild(parent) {
    return $("#" + parent).find("*").last().siblings().addBack();
}
var item=findDeepestChild("S04");
console.log(item)

console.log(item.data("id"));

score 0 · Answer 2 · answered Mar 05 '13 at 16:10

0

You're calling it with a string, but it's expecting a jQuery instance.

Instead of

var itemId=$('#findbefore').prev('.snew').attr('id');//
var item=findDeepestChild(itemId);

you probably want

var item=findDeepestChild($('#findbefore').prev('.snew'));

answered Mar 05 '13 at 16:10

T.J. Crowder

1,031,962
187
1,923
1,875

score 0 · Answer 3 · answered Mar 05 '13 at 16:10

0

You are passing in itemId, which is the ID attribute of a given element. I think what you meant to pass was the element itself. Just remove the attr call, leaving this:

var item = findDeepestChild($("#findbefore").prev(".snew"));

answered Mar 05 '13 at 16:10

Niet the Dark Absol

320,036
81
464
592

When I print the `item` in `alert` it returning `[object Object]` . If it referring the `img` then I how to find the `data-id` of `img` – James Mar 05 '13 at 16:24
Of course it does, that's what it's supposed to. You're supposed to pass a jQuery Object to that function. I'm confused by what you're trying to do. Why can't you just search for the right element directly? – Niet the Dark Absol Mar 05 '13 at 16:27

How to find the deepest child of a div with jquery

3 Answers3