jQuery: как выбрать & ldquo; отсюда до следующей H2 & rdquo ;?

You can also do this without editing you HTML. This is a plugin I just wrote for this particular purpose:

(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);

You can use it like this:

 $('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
 });

] не имеет ли смысла использовать список DL в стиле css?

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

А затем простой выбор с помощью:

$('+ dd', this); 

это текущий выбор dt .

Или просто оберните каждый ответ в div, так как это тоже имеет смысл семантически. Однако я думаю, что список DL имеет гораздо больше смысла семантически.

Обратите внимание, что выбранный ответ хорош, но я собираюсь сделать что-то подобное, поэтому я работал над ним сверхурочно :)

Я привел это в пример.

Данный 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(); 
  }) 
});

Maybe this isn't really answering your question, but you could wrap every FAQ item (i.e. every question/answer pair) in a DIV element. This would make sense semantically, and the non-programmer maintaining the page would simply have to copy a full DIV (no need for classes).

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();
});

Я не думаю, что ваша стратегия решения проблемы верна, у вас есть 6 ответов, которые частично решают вашу проблему .....

Но самый главный проблема в том, что вы говорите, что не можете доверять сопровождающим использовать divs / span / классы и т. д.

Я думаю, вам следует упростить для них процесс и обучить их использовать ваш метод, иначе он НЕ БУДЕТ работают.

добавьте несколько простых пометок и интерпретируйте их.

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

(jQuery не исправит "пользовательскую" ошибку)

Конечно! Просто создайте цикл while.

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

Предполагается, что у вас есть только теги p после h2. Вы можете добавить больше исключений в цикл while, если хотите добавить что-то вроде img.

Или, если вам все равно, что находится между тегами H2, вы можете проверить, не равно ли они H2.

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

Это скроет все, что находится после нажатия H2, пока не будет найден следующий H2 или вы не подниметесь наверх уровень в дом.

Я понимаю, что это старый вопрос, но у jQuery 1.4 теперь есть следующийUntil. Так что теперь должно сработать что-то подобное:

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