jQuery nextUntil id < 数字或替代

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#-class 的 LI。

因此，如果您按下 hide()，我希望隐藏 ID 为 3、4、5、6、7 的 LI。 如果我按下下一个，我想要 4、5、6、7，而我想要隐藏 id 5 的 thir。

这是我为它制作的 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>