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后，我想隐藏所有带有数据级别＆gt;的元素。 4直到我开始使用数据级＆lt; 4。

Answer 1

~~您可以使用.filter()~~

将匹配元素集合减少到与选择器匹配的元素或通过函数测试。

示例代码

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

Answer 2

这是另一种解决方案

编辑：对不起，问题不明确，此解决方案隐藏了所有具有更大价值的元素。

HTML

<table id="resultTable">
<tr data-level=2><td>2</td></tr>
<tr data-level=3><td>3</td></tr>
<tr data-level=4><td>4</td></tr>
<tr data-level=2><td>2</td></tr>
<tr data-level=3><td>3</td></tr>
<tr data-level=4><td>4</td></tr>
</table>

JS

$(document).ready(function () {    
    $("tr","#resultTable").on("click",function() {
        var el = $(this);
        var clickedValue = parseInt(el.attr("data-level"),10);
        hideLargerThan(clickedValue); 
    });    
    var hideLargerThan = function(value) {
        $("tr","#resultTable").each(function() {
            var el = $(this);
            var myValue = parseInt(el.attr("data-level"),10);
            if(myValue > value)
                el.hide();
        });
    };
});

http://jsfiddle.net/JKurcik/c8Q5Z/2/

您可以轻松地从此代码中获取。

选择器以找到attr大于给定的最接近的DOM元素

2 个答案: