找不到下一个元素

Question

我想在页面上有多个元素，当单击标题跨度时，这些元素将切换下一个内容跨度的可见性。所有内容跨度内容都隐藏在准备好的文档中。

内容切换在定位整个类时有效，但在尝试从被点击的标题跨度上定位下一个内容跨度元素时无效。

当我们试图操纵通过 Telerik Radeditor 输入的文本时，正在使用特定的标记

http://jsfiddle.net/hn5ss2au/

HTML

<p>
   <span class="collapsibleHeader">Content Header</span><br />
   <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span>
</p>

<p>
   <span class="collapsibleHeader">Content Header</span><br />
   <span class="collapsibleContent">Sed dignissim velit non congue consequat.</span>
</p>

jQuery

$(document).ready(function () {
$('.collapsibleContent').hide();
    $('.collapsibleHeader').click(function (e) {
        $(this).parent().next('.collapsibleContent').toggle();
        e.preventDefault();
    });
});

Answer 1

你要上一层，到 p 元素，然后 next 到下一个元素（见下一个注释），但 .collapsibleContent 是 p 的子元素，而 <br/> 实际上是next() 元素到 p （因此过滤器也不匹配任何内容）。 next() 只返回 next 元素，then 应用过滤器来查看它是否匹配。

删除parent() 并将nextAll() 与您的选择器一起使用：

$(document).ready(function () {
    $('.collapsibleContent').hide();
    $('.collapsibleHeader').click(function (e) {
        $(this).nextAll('.collapsibleContent').toggle();
        e.preventDefault();
    });

    $('.collapsibleContent2').hide();
    $('.collapsibleHeader2').click(function (e) {
        $('.collapsibleContent2').toggle();
        e.preventDefault();
    });
});

JSFiddle: http://jsfiddle.net/TrueBlueAussie/hn5ss2au/3/

您可以将siblings() 与相同的过滤器一起使用，但它比nextAll() 慢。如果碰巧每场比赛不止一场，也加first()

例如

$(this).nextAll('.collapsibleContent').first().toggle();

注意：nextall 比 siblings() 和 parent().children() 的替代品快：http://jsperf.com/jquery-next-vs-siblings/5

Answer 2

下一个不起作用的原因是因为您使用的是parent()。

在click 回调函数中，您正在调用$(this).parent()。当回调被调用时，$(this) 将是.collapsibleHeader 所以当你调用.parent() 时，它会返回p 标签。

要获得.collapsibleContent，您必须调用.children('.collapsibleContent')，而不是.next()。

您的代码如下：

$(this).parent().children('.collapsibleContent').toggle();

jsFiddle：http://jsfiddle.net/qetcd7o4/

Answer 3

访问父级然后 .next() 将获得下一个段落元素，而不是您的内容。在这种情况下没有必要打父母。您需要获取具有类 .collapsibleContent 的单击元素的兄弟姐妹。在单击的元素上获取下一个元素也不起作用，因为从技术上讲，标题之后的下一个元素是一个中断标签。以下将做到这一点：

 $('.collapsibleHeader').click(function (e) {
   e.preventDefault();
   $(this).siblings('.collapsibleContent').toggle();
 });