jQueryの：どのように「次のH2までここから」を選択するには？

StackOverflow https://stackoverflow.com/questions/863356

質問

私は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ヘッダ）？

の間のすべてを選択
役に立ちましたか？

解決

興味深い問題。まず、私は最善の戦略は、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");
    });
  });
});

最高にエレガントな、それがうまくいくわけではありません。

注：これは質問が兄弟である前提としています。そうでない場合、それは非常に複雑になります。

他のヒント

私は、これは古い問題であることを認識が、jQueryの1.4は現在、 nextUntil を持っています。したがって、このような何かが機能するようになりました。

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

は、それがを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リストは、意味的に多くの意味がありますだと思います。

確かに！ただ、whileループを作ります。

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

これは、あなただけのH2の後のpタグを持っていることを前提としています。あなたは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が発見されたり、DOM内のレベルを上に移動するまで、クリックされたH2の後、すべてを非表示になります。

多分これは本当にあなたの質問に答えるされていませんが、DIV要素内のすべての質問項目（すなわち、すべての質問/回答のペア）をラップすることができます。これは、意味的に理にかなって、そのページを維持非プログラマは、単にフル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();
});

念のために、このための答えを必要とする人々がまだあります... また、これは、グループ内の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" />');

    } );
} );

選択した答えは良いものであることに注意してください、私は、私はそれに残業を働いていたので、似た何かをやっに探しています：）

私が例にこれを入れてきました。に

を考えると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(); 
  }) 
});

また、あなたの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
 });

私はこの問題を解決するための戦略は、あなたが、部分的にあなたの問題を解決する6つの答えを持っていた正しいと思ういけない.....

しかし、あなたの最大の問題は、あなたがdivを/スパン/クラスなどを使用するようにメンテナを信頼することはできませんと言うことです。

私はあなたがやるべきだと思うことは、彼らのためのプロセスを簡素化し、あなたの方法またはそれの ののの動作しませんを使用するように訓練されています。

あなた自身のいくつかの簡単なマークアップを追加し、彼らのために解釈します。

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

（jQueryの 'ユーザー' バグが修正されません）

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top