javascript - 选择器查找属性大于给定的最接近的 DOM 元素

Question

我在 AJAX 之后创建了表，如下所示:

<tr data-level=2>
<tr data-level=3>
<tr data-level=4>
..etc.
<tr data-level=2>
<tr data-level=3>
<tr data-level=4>
..etc.

当然，任何数据级别上都可能有许多单元格。

我想将大于单击级别的所有行隐藏到小于单击级别的行。因此 - 在单击 data-level=4 后，我想隐藏 data-level > 4 的所有元素，直到到达 data-level < 4 的行。

Answer 1

您可以使用.filter()

Reduce the set of matched elements to those that match the selector or pass the function's test.

示例代码

$('tr[data-level]').on('click', function(){
    var level = $(this).data('level'); //Get level of clicked element
    $('tr[data-level]').filter(function(){
        return $(this).data('level') > level;
    }).hide();
})

DEMO

使用

$('tr[data-level]').on('click', function () {
    var level = $(this).data('level'); //Get level of clicked element
    var arr = [];
    $(this).nextAll('tr[data-level]').each(function () {
        if ($(this).data('level') > level) {
            arr.push($(this));
        } else if ($(this).data('level') == level) {
            return false;
        }
    });
    $.each(arr, function(){
        $(this).hide() 
    });
})

DEMO