Question

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

示例HTML：

.toggle-content

所以现在我用以下方式切换：

<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(); });类在DOM中更深，我必须继续处理更多.toggle，具体取决于它有多深。

那么，如何在不使用一堆parent()和.toggle-content的情况下选择parent()的下一个实例？

Answer 1

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

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

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

（从技术上讲，它始于this元素本身，但由于您不能拥有嵌套的<p>元素，因此这不应成为问题。） < / 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();

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

Answer 2

.closest()和.nextAll()的组合：

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

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

实际上递归地搜索具有某个类的“next”元素，无论它处于什么级别，它都会变得更复杂，但是如果我们编写自己的简短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/

jQuery：如何使用name-xyz选择下一个元素？

2 个答案: