找不到下一个元素

Unable to find next element

本文关键字：元素 下一个 找不到      更新时间：2023-09-26

我希望在一个页面上有多个元素，当单击页眉span时，这些元素将切换下一个内容span的可见性。所有内容跨度的内容都隐藏在文档中。

内容的切换在以整个类为目标时有效，但在尝试以正在单击的标题span上的下一个内容span元素为目标时无效。

当我们试图操作通过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();
    });
});

您要向上一级，到达p元素，然后到达next下一个元素（请参阅下一个注释），但.collapsibleContent是该p的子元素，而<br/>实际上是next()元素到p（因此过滤器也不匹配任何内容）。next()只返回下一个元素，然后应用过滤器以查看它是否匹配。

放下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

next不起作用的原因是因为您使用的是parent()。

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

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

您的代码如下：

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

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

访问父级，然后.next（）将获得下一个段落元素，而不是内容。在这种情况下，没有必要打家长。你需要获取具有类collapsibleContent.的点击元素的兄弟元素。在点击的elem上获取next也不起作用，因为从技术上讲，在标头之后的下一个elem是break标记。下面的方法可以做到这一点：

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

相关文章：