javascript - jQuery nextUntil id < number 或替代方案

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# 类中具有较高编号的以下元素，直到它到达具有相同 .de# 类的 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 元素。

我希望我在描述问题时没有让问题变得太复杂。如果你有比使用 next 更好的主意，直到我洗耳恭听。

Answer 1

如果我明白你想要做什么，我认为如果你解决你的 ID 问题并更改以下行，它可能会起作用

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

类似于

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

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