jQuery：如何选择下一个名称为xyz的元素？

Question

我正在尝试构建一个非常简单的通用切换功能，其中切换“开关”具有类.toggle，然后我希望它toggle()下一个具有类.toggle-content的元素。

示例HTML：

<p>
  <a href="#" class="toggle">Toggle the thing</a>
</p>
<p class="toggle-content hidden">I'm totally hidden right now</p>

现在我会使用以下方法来切换：

$(".toggle").click(function() {
  $(this).parent().next('.toggle-content').toggle();
});

问题在于如果.toggle类在DOM中的深度更深，我必须根据它的深度/浅度不断添加更多的parent()，这样就会很麻烦。

那么，如何仅选择下一个.toggle-content实例而不必使用大量的parent()和next()呢？

- Shpigford

Answer 1

使用closest()^(文档)方法替代parent()^(文档)方法。

$(this).closest('p').next('.toggle-content').toggle();

这将获取它找到的第一个<p>祖先元素。

（技术上讲，它从this元素本身开始，但由于您不能嵌套<p>元素，所以这不应该是个问题。）

---

编辑：如果您无法针对特定标记，也无法分配类来用作目标，请执行以下操作：

$(this).parentsUntil('> .toggle-content:last').next('.toggle-content').toggle();

它使用parentsUntil()^(docs)方法获取所有祖先元素，直到找到一个具有子元素.toggle-content的元素。它使用child-selector^(docs)来实现这一点。

因为它在那个元素之前停止，所以你将处于正确的层级。 示例：http://jsfiddle.net/yCG72/

---

否则，您可以使用filter()^(docs)方法进行筛选。

$(this).parents().filter(function(){
    return $(this).next('.toggle-content').length;
}).first().next('.toggle-content').toggle();

Example: http://jsfiddle.net/yCG72/1/

- user113716

---

<p>标签实际上可以是任何标签（fieldset、legend、div、section等），所以最好不要设置它。 - Shpigford

@Shpigford：你需要一些目标。如果它可以是任何标签，你应该在上面放一个类。否则它会变得不必要地复杂。$(this).closest('.toggler').next(... - user113716

Answer 2

结合使用.closest()和.nextAll()：

$(this).closest('p').nextAll('.toggle-content:first').toggle();

.nextAll() 处理第一个 .toggle-content 可能不是直接的下一个元素的情况。

---

如果要实际递归搜索具有特定类的“下一个”元素，而不考虑它在哪个级别上，那么就会变得更加复杂，但是如果我们编写自己的简短jQuery插件，就可以完成：

$.fn.nextR = function (selector) {
    var el;
    if (this.children().length) {
        el = this.children().eq(0);
    } else if (this.next().length) {
        el = this.next();
    } else {
        el = this.parent().next();
    }

    if (selector && !el.is(selector) && el.length) {
        el = el.nextR(selector);
    }
    return el;
};

然后像这样使用：

$(this).nextR('.toggle-content').toggle();

查看演示：http://jsfiddle.net/4uVM5/

- David Tang