javascript - jQuery next直到id <数字或替代

我正在使用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（）函数中正常工作，但不能在第二个hide（）函数中正常工作。在这里它将隐藏ID：4-8。所以我想做点事。所以我希望nextuntill（）隐藏元素，直到它到达具有相同.de＃或较低.de＃的LI元素。

我希望我对问题的描述不会使它复杂化。如果您有比使用nextUntill更好的主意，那么我将不胜枚举。

最佳答案

如果我了解您要执行的操作，我认为如果您解决了ID问题并更改了以下行，则可能会起作用

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

像

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

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