如何使用jQuery选取点击元素下的子元素

Question

我想隐藏用户点击的元素下方的所有内容（但保留上面的元素）。请查看此演示：http://jsfiddle.net/dS2vA/ 因此，如果单击第二个<li>，则下面的三个<li>应隐藏。如果单击第四个<li>，则只应隐藏第五个元素。

我尝试使用:not('clicked')，但它也会选中点击元素上方的元素。

有什么想法吗？

- Alex

---

顺便提一下，你也可以在点击事件中只使用 $('ul li').removeClass(); 而不是那个 each 循环。 - Mark Pieszak - Trilon.io

@mcpDESIGNS OP希望每次单击时都能移除类 ;) - VisioN

@VisioN 进行了编辑和更改，哎呀！ - Mark Pieszak - Trilon.io

Answer 1

只需使用以下代码：

$(this).nextAll().hide();

DEMO: http://jsfiddle.net/dS2vA/1/

- VisioN

Answer 2

尝试类似以下的代码：

$('ul li').click(function() {
    $('ul li').each(function() {
        $(this).removeClass();
    })
    $(this).nextAll("li").slice(0,3).addClass('clicked');
})

- Mikus

Answer 3

除了 VisioN 的答案之外，更具体地，您可以像这样在 nextAll() 中添加选择器过滤器（“li”）：

$(this).nextAll("li").hide();

- razz

---

不需要，因为在有效的标记中，<li>元素的所有同级元素也应该是<li>元素。 - VisioN

在这个例子中，它并不是必需的，但在你有其他类型的子元素的情况下会很有帮助。 - razz