如何使用属性过滤器找到最接近的？答案

【问题标题】：How to find closest with attribute filter?如何使用属性过滤器找到最接近的？
【发布时间】：2014-08-13 17:20:48
【问题描述】：

我有一张像下面这样的表格

<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 = (this tr data-depth) - 1 得到最近的行

我找不到同时使用 this.closest('tr') 和 attr('data-depth') = this.attr('data-depth')-1 的方法。

【问题讨论】：

最接近什么？ Closest 是一个遍历树的 ancestor 方法。你用什么设置this？
离锚标签最近的
你的意思是当标签被点击的时候？
如果我点击锚标签，它应该显示最接近的 tr 与 data-depth = this.attr('data-depth')-1 锚标签值。
就像可以看到父子关系一样。因此，如果我单击子锚标记，它应该向我显示父锚标记值

标签： javascript jquery html

【解决方案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/的演示

【讨论】：

【解决方案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
});

演示：http://jsfiddle.net/qtoxj1sr/2/

【讨论】：

【解决方案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
    });
});

【讨论】：

【解决方案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/

【讨论】：