How to find closest with attribute filter?

Question

I am having a table like below

<table>
    <tr data-depth="0" class="expand level0">
        <td>VR [ <a class="link">2147483646 </a>]
        </td>
    </tr>
    <tr data-depth="1" class="expand level1">
        <td>Business &amp; Industrial [ <a class="link">12576 </a>]
        </td>
    </tr>
    <tr data-depth="2" class="expand level2">
        <td>Healthcare, Lab &amp; Life Science [ <a class="link">11815
        </a>]
        </td>
    </tr>
    <tr data-depth="3" class="expand level3">
        <td>Imaging &amp; Aesthetics Equipment [ <a class="link">92036
        </a>]
    </tr>
    <tr data-depth="2" class="expand level2">
        <td>Heavy Equipment [ <a class="link">177641 </a>]
        </td>
    </tr>
    <tr data-depth="3" class="expand level3">
        <td>Forklifts [ <a class="link">97185 </a>]
    </tr>
    <tr data-depth="2" class="expand level2">
        <td>Printing &amp; Graphic Arts [ <a class="link">26238 </a>]
        </td>
    </tr>
    <tr data-depth="3" class="expand level3">
        <td>Commercial Printing Presses [ <a class="link">26247 </a>]
        </td>
    </tr>
    <tr data-depth="2" class="expand level2">
        <td>Restaurant &amp; Catering [ <a class="link">11874 </a>]
        </td>
    </tr>
    <tr data-depth="3" class="expand level3">
        <td>Concession Trailers &amp; Carts [ <a class="link">67145 </a>]
        </td>
    </tr>
</table>

I want to get the closest row with the data-depth = (this tr data-depth) - 1

I am not able to find the way to use this.closest('tr') and attr('data-depth') = this.attr('data-depth')-1 together.

Answer 1

Something like this ?

JS :

$('a').click(function(){
    var depth = $(this).closest('tr').attr('data-depth')-1;
    var item = $(this).closest('table').find('tr[data-depth='+depth+']');
    // item is your object
});

DEMO : http://jsfiddle.net/qtoxj1sr/2/

Answer 2

I would recommend adding something so that you can relate the child rows to their parent row. Maybe by giving each row an id, and then adding a data-parent-id attribute. It would make it much easier to work with. However, assuming you can't do that, something like this should work to get the single row that is the parent within the tree:

$('a').click(function(){
    var parentRow = $(this).closest('tr');
    var depth = parentRow.attr('data-depth')-1;
    var parentNode = parentRow.siblings(':lt(' + parentRow.index() + ')').filter('[data-depth=' + depth + ']').last();

    //parentNode now is the row of the tree-parent of the row that was clicked
});

What this does is first grab all of the siblings of the row that is clicked on, that have an index less than the row clicked (since the parent node in the tree will always come before the child node). It then filters that list to only ones that have a data-depth that is 1 less than the data-depth of the row that is clicked on. Since there could be more than one of those based on what the tree depth above the clicked-row looks like, it just gets the last one. The last one will be the closest to the one clicked, so should be its actual parent within the tree.

Demo at http://jsfiddle.net/t3u3rx8x/

Answer 3

See if this works for you in the way that you expect - http://jsfiddle.net/swhshuw8/

$('a').click(function () {
    var myDataDepth = $(this).closest('tr').attr('data-depth'); // gets the closest depth
    var newDataDepth = myDataDepth - 1; // calculates the new depth
    var itemsWithDataDepth_newDataDepth = $('[data-depth="' + newDataDepth + '"]'); // gets the items with the new depth
    $(itemsWithDataDepth_newDataDepth).each(function(){
        console.log( $(this).find('td').html() ); // prints the new items out
    });
});

Answer 4

Try

$(function () {
    $(".link").on("click", function (e) {
        elem = $(e.target);
        e.preventDefault();
        var _elem = $("tr[data-depth=" 
                    + Number(elem.closest("[data-depth]")[0].dataset.depth - 1) 
                    + "]");
        // do stuff with `_elem`
        console.log(_elem.text());
    });
});

jsfiddle http://jsfiddle.net/guest271314/3efeLwr3/