无法通过使用.parent（）和.next（）方法的组合来访问元素

Question

我将以下函数绑定到我创建的切换按钮，以隐藏/取消隐藏位于按钮旁边的内容，但是在DOM中的另一个级别上。

var togglelabel = packagehead.append("<div>").children().last().addClass("togglewrap").append("<label>")
        .children().last().addClass("toggle android header-toggle")
        .on('click', function(){
            $(this).parent().parent().next('.hidable').toggle();
        });

html结构如下所示：

<div>
    <div class="packageheader">
        <span>Package #1501</span>
        <div class="togglewrap">
            <label class="toggle android header-toggle">
                <input type="checkbox">
                <p>
                    <span>More</span>
                    <span>Less</span>
                </p>
                <a class="slide-button">
                </a>
            </label>
        </div>
    </div>
    <br>
    <p class="hidable">
        <pre>content here</pre>
    </p>
</div>

此代码无法隐藏<p>类.hidable。 我尝试使用console.log（）来“调试”代码以查看'this'所代表的元素，并发现它正如预期的那样代表label元素。

所以我认为使用以下链：

$(this).parent().parent().next('.hidable').toggle();

正确地将2个级别升级到<div class="packageheader">，然后使用隐藏类的下一个兄弟，即<p class="hidable">

这是结构的截图，确保我没有遗漏任何东西：

Answer 1

你可以这样做：

$(this).closest('.packageheader').nextAll('.hidable').first().toggle();

请注意，使用closest代替parent().parent()会稍微好一些，因为当HTML发生变化时，它不会轻易破坏，维护者更容易破译代码所做的事情。

另请注意，您的HTML无效，PRE内无P。

Demonstration