Javascript jQuery nextuntil id<；num或备选方案

我使用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> 

问题是这个函数没有完全按照我想要的那样工作。它可以在第一个hide（）函数和第三个hide（）函数中正常工作，但在第二个hide（）函数中不能正常工作。在这里它将隐藏id:4-8。所以我想做点什么。因此，我希望nextuntil（）隐藏元素，直到它到达具有相同.de#或更低的.de#的LI元素

我希望我在描述这个问题时没有把它复杂化。如果你有比使用NextUntil更好的主意，我洗耳恭听。

这似乎有效：

$(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）：

测试1 测试2隐藏 试验3侧

测试4侧

测试5 测试6 测试7 试验8侧 测试9隐藏 测试10隐藏 试验11 这似乎有效：

$(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）：

测试1 测试2隐藏 试验3侧

测试4侧

测试5 测试6 测试7 试验8侧 测试9隐藏 测试10隐藏 试验11

---

如果我理解您的意图，我认为如果您解决了您的ID问题并更改以下行，可能会奏效

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

差不多

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

---

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

如果我了解您试图做什么，我认为如果您解决ID问题并更改以下行，可能会起作用

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

差不多

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

---

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

第一件事：您的“id”值不能仅仅是数字-它们必须以字母或“u”开头。第一件事：您的“id”值不能仅仅是数字-它们必须以字母或“u”开头.不幸的是，这没有起作用。当您按下第二个按钮时，它将隐藏测试4-8。我想把它藏起来。我希望在de#相同或更低时停止下一步。在本例中，按下的是.de2，因此它应该停止在.de1。也许我应该用下一步以外的方法来做这件事？不幸的是，这没用。当您按下第二个按钮时，它将隐藏测试4-8。我想把它藏起来。我希望在de#相同或更低时停止下一步。在本例中，按下的是.de2，因此它应该停止在.de1。也许我应该使用NextUntil以外的其他工具来实现这一点？我认为您像karim79一样忽略了真正的问题，即当.de类中的数字相同或更低时，它应该停止。我的选择器会这样做。我建议构建一个选择器，它是一个逗号分隔的选择器列表，从li.de1开始，一直到达到上限值为止。这并不漂亮，但我认为你不能编写一个选择器来对类名的一部分进行那样的数字比较。啊哈，我想我误解你了。看起来这个可以用。我想你像karim79一样忽略了真正的问题，当.de类中的数字相同或更低时，它应该停止。我的选择器会这样做。我建议构建一个选择器，它是一个逗号分隔的选择器列表，从li.de1开始，一直到达到上限值为止。这并不漂亮，但我认为你不能编写一个选择器来对类名的一部分进行那样的数字比较。啊哈，我想我误解你了。看起来这个可以用。我会汇报我试过的情况。