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() 的？

Answer 1

使用 closest() ^(docs)方法而不是 parent() ^(docs)方法。

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

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

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

<小时/>

编辑:如果您无法定位特定标记，并且无法分配用作目标的类，请执行以下操作:

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

它使用 parentsUntil() ^(docs)获取所有祖先的方法，直到找到一个有 child 的祖先 .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();

示例: http://jsfiddle.net/yCG72/1/