jQuery的：如何选择“从这里直到下一个H2”？

Question

我设置了一个jQuery的非常简单的FAQ页面。像这样：

<h2>What happens when you click on this question?</h2>
<p>This answer will appear!</p>

这是所有一个非常具体的div里面，所以我会选择与$('#faq h2')标题。简单吧？点击H2，并使用this.next()使下段显示出来。

（此页的告诫是，非程序员将维护它，这就是为什么我不使用类：有没有保证，任何新的条目将在他们的右班）

原来如此！问题是：

<h2>What happens when you click on the next question?</h2>
<p>That is an interesting conundrum.</p>
<p>Because the maintainer is kind of long-winded</p>
<p>and many answers will span a few paragraphs.</p>

那么如何，没有divs和类和诸如此类的东西加入，可我有我的this.next()例行选择之间的一切问题 - 是 - 是 - 点击上和下一个问题（H2标题）？

Answer 1

有趣的问题。首先我要说，我认为最好的策略就是包围整个答案的一个div，然后问题就变得微不足道的解决：

<h2>Question here</h2>
<div>
<p>Answer here</p>
</div>
</h2>Next Question</h2>
...

使用：

$(function() {
  $("h2").click(function() {
    $(this).next().toggleClass("highlighted");
  });
});

但是，这样说，它是没有这种可解的。

$(function() {
  $("h2").click(function() {
    $(this).nextAll().each(function() {
      if (this.tagName == 'H2') {
        return false; // stop execution
      }
      $(this).toggleClass("highlighted");
    });
  });
});

不无比优雅，但它会工作。

注意：：此假定的问题是兄弟姐妹。如果不是它就会复杂得多。

Answer 2

我意识到这是一个老问题，但jQuery的1.4现在已经 nextUntil 。所以，这样的事情现在应该工作：

$('h2').click(function(){
    $(this).nextUntil('h2').show();
})

Answer 3

不可能将其使用样式的CSS更有意义的 DL列表

<dl class="faq">
    <dt>Question?</dt>
    <dd>
         <p>Answer</p>
         <p>Answer</p>
         <p>Answer</p>
    </dd>
</dl>

，然后使用容易的选择：

$('+ dd', this); 

这是当前的 DT 选择

或者只是包装在一个div每个答案，因为它是有道理的语义过。但是我觉得DL列表使得很多更有意义的语义。

Answer 4

当然！只是使while循环。

$('h2').click(function() {
    var next = $(this).next();
    while (next.length != 0 && next[0].nodeName == 'P')
    {
        next.toggle();
        next = next.next();
    }
});

这是假设你只有p标签的后H2。如果你想添加类似IMG您可以添加更多的例外while循环。

或者，如果你不介意的H2标签，你可以检查不等于H2之间有什么。

$('h2').click(function() {
    var next = $(this).next();
    while (next.length != 0 && next[0].nodeName != 'H2')
    {
        next.toggle();
        next = next.next();
    }
});

这将隐藏被点击，直到下一次H2的H2之后，一切都发现，或者你去了DOM中的水平。

Answer 5

也许这是不是真的回答你的问题，但你可以在DIV元素包装每一个FAQ项（即每一个问题/答案对）。这将使意义，语义和非程序员保持该网页将只需要复制一个完整的DIV（无需类）。

HTML：

<div id="faq">
 <!-- start FAQ item -->
 <div>
  <h2>Question goes here</h2>
  <p>Answer goes here.</p>
  <p>And here.</p>
  <ul>
   <li>Really, use any HTML element you want here.</li>
   <li>It will work.</li>
  </ul>
 </div>
 <!-- end FAQ item -->
 <!-- start FAQ item -->
 <div>
  <h2>Second question goes here</h2>
  <p>Answer to question two.</p>
 </div>
 <!-- end FAQ item -->
</div>

的JavaScript（jQuery的）：

$('#faq div h2').click(function() {
 $(this).parent().find(':not(h2)').show();
});

Answer 6

以防万一还有谁需要这个答案的人... 这也包括在组中的H2线。

这里，如果样品的HTML针对我的解决方案的工作原理：

<h2> text1 </h2>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<h3>kjdf</h3>
<h2>asdk</h2>
<h3>kjdf</h3>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<p>asd</p>
<h2>aqdsa</h2>

---

溶液：

jQuery( function ( $ ) {
//defining groups for wrapping them in custom divs

    $('h2').each( function () {
        var grpForDiv= [];          
        var next = $(this).next();  
        grpForDiv.push(this);
        while ( next.length!==0 && next!== undefined && next[0].nodeName !== 'H2')
            {
            grpForDiv.push(next[0]);
            next = next.next();
            }       
        jQuery(grpForDiv).wrapAll('<div class="Group1" />');

    } );
} );

Answer 7

请注意，所选择的答案是好的，但我寻找到做类似的东西，所以我加班就可以了：）

我已经把此成一个例子。

给定的HTML：

<h2>Question 1</h2> 
<p>Answer 1</p> 
<p>Answer 1</p> 
<p>Answer 1</p> 
<h2>Question 2</h2> 
<p>Answer 2</p> 
<p>Answer 2</p> 
<p>Answer 2</p> 
<h2>Question 3</h2> 
<p>Answer 3</p> 
<p>Answer 3</p> 
<p>Answer 3</p> 

执行以下步骤，你会得到你的答案。我的认为的是现在最优雅给出的所有解决方案，但我会珍惜别人对这个输入了不少。

jQuery.fn.nextUntilMatch = function(selector) { 
  var result = [];   
  for(var n=this.next();(n.length && (n.filter(selector).length == 0));n=n.next())  
      result.push(n[0]);   
  return $(result); 
} 

$(function() { 
  $('h2~p').hide(); 
  $('h2').click(function() { 
    $(this).nextUntilMatch(':not(p)').toggle(); 
  }) 
});

Answer 8

您也可以做到这一点，而无需编辑HTML你。这是一个插件，我只是写了这个特殊的目的：

(function($){
    $.fn.nextUntill = function(expr){
        var helpFunction = function($obj, expr){
            var $siblings = $obj.nextAll();
            var end = $siblings.index( $siblings.filter(expr) );
            if(end===-1) return $([]);
            return $siblings.slice(0, end);
        }
        var retObject = new Array();
        this.each(function(){
            $.merge(retObject, helpFunction($(this), expr));
        });
        return $(retObject);
    }
})(jQuery);

可以使用这样的：

 $('h2').click(function(){
    $(this).nextUntill('h2').show(); //this will show all P tags between the clicked h2 and the next h2 assuiming the p and h2 tags are siblings
 });

Answer 9

我不认为你解决问题的策略是正确的你有6名回答了部分解决你的问题......

但你最大的问题是，你说你不能信任使用的div /跨/类的维护者等。

我觉得你应该做的是简化的过程对他们来说，并培训他们使用你的方法或它的的不会的的工作。

添加一些简单的标记你自己的，并解释他们。

[Q] What happens when you click this link?[/Q]
[A] This marvellous answer appears [/A]

（jQuery将不固定 '用户' 缺陷）