jQuery nextAll -- 点击 h 元素切换所有 p 元素直到下一个 h答案

【问题标题】：jQuery nextAll -- Click on h-element toggles all p-elements until next hjQuery nextAll -- 点击 h 元素切换所有 p 元素直到下一个 h
【发布时间】：2010-11-07 23:21:32
【问题描述】：

我正在创建一个常见问题解答页面，通过单击问题来切换答案。问题是h3，答案是几个p-elements。像这样：

<h3>The First Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

<h3>The Second Question</h3>
<p>Answer Paragraph</p>
<p>Answer Paragraph</p>

如何切换属于某个问题的所有p-元素？我的 JS 在页面上切换所有以下p-elements：

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $(this).nextAll("p").toggle();
    });
});

我不能使用div 的或类）。

【问题讨论】：

标签： javascript jquery toggle next

【解决方案1】：

我会这样做：

$(function() {
  $("p").hide();
  $("h3").click(function() {
    $(this).nextAll().each(function() {
      if ($(this).is('h3')) {
        return false;
      }
      $(this).toggle();
    });
  });
});

从 each() 返回 false 结束链。

如果可能，我还建议您更好地构建数据以处理这种情况。例如：

<h3 class="question">Why is there no soup for me?</h3>
<div class="answer">
<p>...</p>
<p>...</p>
<p>...</p>
</div>

然后问题变得微不足道：

$(function() {
  $("div.answer").hide();
  $("h3.question").click(function() {
    $(this).next().toggle();
  });
});

【讨论】：

检查 tagName 是个好主意，我没想到。猜猜我被困在jQuery模式中。您可能还想检查它是否有被切换的元素，以防除段落以外的其他内容不应该被切换。
cletus - 这可能是因为您使用 nextall 而不是 nextAll 和 : 而不是 ;

【解决方案2】：

最好的方法是使用 each 并迭代，直到到达下一个应该停止迭代的元素。在 each 期间返回 false 会停止迭代。使用过滤器可以检查迭代中元素的类型并做出适当的响应。

$(function() {
   $("p").hide();
   $("h3").click(function() {
       $(this).nextAll().each( function() {
           if ($(this).filter('h3').length) {
              return false;
           }
           $(this).filter('p').toggle();
       });
   });
});

【讨论】：

我更喜欢你的解决方案，因为它更多的是 jQueriesh。
我认为注意这段代码只会隐藏段落标签可能很重要。如果你的文字没有段落标签或 h3 标签后面的一些其他标签，它不会隐藏它们。
@Yogi -- 是的，这是设计使然。如果要将其应用于任何子元素，只需删除切换之前的“filter('p')”即可。

【解决方案3】：

这是一个不使用 .each() 的有趣解决方案

$("h3").click(function() {

    var idx = $("h3,p").index(this);
    var nextIdx = ($("h3,p").index($(this).nextAll("h3")));
    var nextPs = (nextIdx == -1) ? $("h3,p").length - idx : nextIdx - idx;
    $(this).nextAll("p:lt(" + (nextPs - 1) + ")").toggle();

});

我正在按索引查找下一个 Ps。不知道这有多实用，但这是一个很好的练习。

【讨论】：

恕我直言，这段代码更难阅读。我更喜欢接受的答案。
据我计算，这会遍历 DOM 三次，以避免遍历单个标题之后的段落元素一次。我投票不实用。 :-)
没问题！我并不是说这会更好——我只是好奇是否可以不使用 .each() 来完成。上面说的好。
是的，通过带有console.time和console.timeEnd的firebug运行这个，即使有这么一小段html，上面的代码与接受的答案相比表现不佳。

【解决方案4】：

我会推荐jQuery nextUntil();

$(document).ready(function(){
    $("p").hide();
    $("h3").click(function(){
        $("h3").nextUntil("h3").toggle();
    });
});

【讨论】：