Как найти ближайший фильтр атрибутов?

Question

Я имею таблицу, как показано ниже

<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> 

Я хочу, чтобы получить наиболее близкую строку с данными углубленными = (это тр данных по глубине) - 1

Я не являюсь способный найти способ использования this.closest ('tr') и attr ('data-depth') = this.attr ('data-depth') - 1 вместе.

Answer 1

Я бы рекомендовал добавить что-то, чтобы вы могли связать дочерние строки с их родительской строкой. Возможно, указав каждую строку id, а затем добавив атрибут data-parent-id. С ним было бы намного легче работать. Однако, если вы не можете сделать это, что-то, как это должно работать, чтобы получить одну строку, которая является родителем в дереве:

$('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 
}); 

Что это делает первым захватить все братья и сестры из ряда, который на которых указатель меньше, чем нажата строка (поскольку родительский узел в дереве всегда будет находиться перед дочерним узлом). Затем он фильтрует этот список только для тех, у которых есть глубина данных, которая на 1 меньше глубины данных строки, на которую нажимается. Поскольку может быть более одного из них, основанного на том, как выглядит глубина дерева над щелчком, он просто получает последний. Последний будет самым близким к клику, поэтому он должен быть его фактическим родителем в дереве.

Демо на http://jsfiddle.net/t3u3rx8x/

Answer 2

Что-то вроде этого?

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 3

Смотрите, если это работает для вас в том, что вы ожидаете - 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/