Question

我正在使用jQuery根据他们的类显示/隐藏不同的LI元素。看看这个例子。

<li id="1" class="fp de1"></li> 
<li id="2" class="fp de1"><button onclick="hide(2,2);"></li> 
<li id="3" class="fp de2"><button onclick="hide(3,3);"></li> 
<li id="4" class="fp de3"><button onclick="hide(4,4);"></li> 
<li id="5" class="fp de4"></li>
<li id="6" class="fp de3"></li>
<li id="7" class="fp de3"></li>
<li id="8" class="fp de1"><button onclick="hide(8,2);"></li> 
<li id="9" class="fp de2"><button onclick="hide(9,3);"></li> 
<li id="10" class="fp de3"><button onclick="hide(10,4);"></li> 
<li id="11" class="fp de4"></li>

你可以看到其中一些有一个带隐藏功能的按钮。我想要的是，当你按下隐藏按钮时，下面的元素在.de #class中有一个更高的数字应该被隐藏，直到它到达一个具有相同的.de＃-class的LI。

所以如果你按下hide（），我希望隐藏带有ID 3,4,5,6,7的LI。如果我按下下一个我想要4,5,6,7，而我希望id 5被隐藏。

所以这是我为它制作的Javascript：

function hide(id,de){
 var de2 = de-1;
 $('#'+id).nextUntil('li.de'+de2).hide();
}

问题是此功能无法正常工作。它可以在第一个hide（） - 函数和第三个但不在hide（）函数中正常工作。这里它将隐藏ID：4-8。所以我想做点什么所以我希望nextuntill（）隐藏元素，直到它到达具有相同.de＃或更低 .de＃的LI元素。

我希望在我对这个问题的描述中并没有让它复杂化。如果你有更好的想法而不是使用nextUntill我都是耳朵。

Answer 1

如果我了解您要执行的操作，我认为如果您修复了ID问题并更改了以下行，则可能会有效

$('#'+id).nextUntil('li.de'+de2).hide();

类似

$('#'+id).nextUntil(selector).hide();

其中选择器是从de2生成的，当de2为1时，选择器为'li.de1'，当de2为2时，选择器为'li.de1，li.de2'，依此类推。

Answer 2

这似乎有效：

$(document).ready(function() {

    // instead of inline javascript
    $("button").click(function() {

        // get the second className
        var parentClass = $(this).parent().attr("class").split(" ")[1];
        $(this).parent().nextUntil("." + parentClass).hide();
    });
});

略微改变了标记，摆脱了内联JS和数字ID（无论如何都不需要ID）：

<li class="fp de1">test 1</li>
<li class="fp de1">test 2<button>Hide</button></li>
<li class="fp de2">test 3<button>Hide</button></li>
<li class="fp de3">test 4<button>Hide</button></li>
<li class="fp de4">test 5</li>
<li class="fp de3">test 6</li>
<li class="fp de3">test 7</li>
<li class="fp de1">test 8<button>Hide</button></li>
<li class="fp de2">test 9<button>Hide</button></li>
<li class="fp de3">test 10<button>Hide</button></li>
<li class="fp de4">test 11</li>

jQuery nextUntill id＆lt;数量或替代

2 个答案: