Question

我有一张如下表

Table

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

我想用data-depth =（这个tr数据深度）得到最接近的行 - 1

我无法找到使用this.closest（'tr'）和attr（'data-depth'）= this.attr（'data-depth'） - 1的方法。

Answer 1

这样的东西？

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

我建议您添加一些内容，以便将子行与其父行相关联。也许通过为每行提供一个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 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

尝试

$(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/

如何找到最近的属性过滤器？

4 个答案: