Jquery 如何在不作为父级的情况下选择低于 id/class 的元素

Jquery how to select elements below an id/class without being the parent?

本文关键字：id 元素 class 选择 情况下 不作为 Jquery      更新时间：2023-09-26

我正在尝试制作一个按钮，可以切换其下方的每个<p>。

这是 HTML：

<p>SHOW</p>
<p>SHOW</p>
<p>SHOW</p>
<a id="hc-more-info">MORE INFO</a>
<p>HIDE</p>
<p>HIDE</p>
<p>HIDE</p>
<ul> ... <ul>

jQuery（这是我到目前为止得到的）我如何从隐藏它们开始？

jQuery('#hc-more-info').click(function(){
        jQuery(this).parent().nextAll('p, ul').toggle();
    });

任何帮助将不胜感激！谢谢！

可以使用nextAll()，其中包括跟随当前元素的所有同级

jQuery(function($){
    $('#toggle-below-button').click(function(){        
       var $btn = $(this), showMore = !$btn.hasClass('show-all');
       $btn.toggleClass('show-all')
            .text( showMore  ? 'LESS INFO' :'MORE INFO')
            .nextAll()
            .toggle();       
    });
});

jQuery('#hc-more-info').click(function(){   
     jQuery(this).parent().nextAll('p').toggle();
});

您可以使用 $（'p'） 作为选择器

编辑

请原谅我之前不明白，直到评论。您也可以使用 .next 方法，但在我看来，更好的做法是为下面的元素分配一些类，然后像 $（'p.toggle'） 一样切换来控制它。

相关文章：