Find last child with jquery

Question

I have a table consisting of rows. Each row has id, data-parent attribute, and a virtual level option stored in data(). Top level rows don't have nor parent nor level attribute. I need to find last child of a node, like ex:

<tr id="83" class=""></tr>
<tr id="91" class="successor" data-parent="83"></tr>
<tr id="93" class="successor" data-parent="91"></tr>
<tr id="92" class="successor" data-parent="91"></tr>
<tr id="94" class="successor" data-parent="92"></tr>
<tr id="133" class="successor" data-parent="83"></tr>
<tr id="134" class="successor rowselected" data-parent="83"></tr>

This looks like

I need to find if row 1.1.1.1 is the last one for 1.1 . How to do it? tried to use nextAll or prevAll selectors and filtering it by data-parent and level... but no luck. Thanks.

Answer 1

Struggling whole day led me to this solution : finding the top node for the row on the same level with dragged row and checking if the element was last before dragged element.

function isLastChild(parent, target, dragged)
{
  var top_node  = target.prevUntil("tr[data-parent="+parent+"]").andSelf().prev().first();
  var child_nodes = top_node.nextUntil("#"+dragged.attr("id")).filter(function(){ return $(this).data("parent") == target.data("parent")});

 return (child_nodes.last().attr("id")==target.attr("id"));
}

Answer 2

Have you tried the following :

var lastTr = $('#TABLEID tr').last();

This should find the last <TR> element of the current Table (Marked with 'TABLEID')

For more info on jQuery.last() look here

Answer 3

Your example code is in conflict with your description of a virtual level option if you truly do have a virtual level option then a this should work. As demonstrated here: http://jsfiddle.net/dBT3D/ I have changed the TR's to DIVs as it was causing issues in the browser by not being properly formatted HTML.

HTML:

<div id="83" class="">
    <div id="91" class="successor" data-parent="83" data-level="1">
        <div id="93" class="successor" data-parent="91" data-level="2"></div>
        <div id="92" class="successor" data-parent="91" data-level="2">
            <div id="94" class="successor" data-parent="92" data-level="3"></div>
        </div>
    </div>
    <div id="133" class="successor" data-parent="83" data-level="1"></div>
    <div id="134" class="successor rowselected" data-parent="83" data-level="1"></div>
</div>

JS:

$(document).ready(function () {
    deepestEl = {
        element: null,
        level: 0
    };
    $('.successor', '#83').each(function (index, el) {
        console.log(el);
        if ($(el).data('level') >= deepestEl.level) {
            deepestEl.element = el;
            deepestEl.level = $(el).data('level');
        }
    });

    console.log(deepestEl);
});

This will return the deepestEl object with the level and the element. In this example it will return {element: div#94.successor, level: 3}