jQuery：ID名をインクリメントする要素を選択しますか？

Question

ご協力いただきありがとうございます。

は、ここに私の状況です：私はIDがPHPを使用して、名前の最後に適用される増分番号を持つdiv要素のセットを持っています。これらの各divはPHPで動的に追加されています（質問がクリックされたときに下にスライドする答えが隠されたdivコンテナのFAQ質問のシリーズです）[Live Example] [1]

ページに表示される質問の数に制限があります。これはWordpressのテーマに使用されており、クライアントは新しい質問を追加したいからです。ここで

は、PHPを使用して、各質問の質問のための構造の例です：

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>"> 
    <h4><a href="#faq<?php $faqnum; ?>" id="slidetoggle">What data is shared?</a></h4> 
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
     <p>Data sharing is defined by the type of service:</p> 
     <ul class="list"> 
      <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
      <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
      <li>Participation in a service requires the member to provide associated data<br /> 
     </ul> 
    </div> 
    </div> 

は今、これは私がjQueryの中で、現在持っているものであり、それは動作しますが、私は新しいものを毎回追加した場合にのみ、私のクライアントは新しい質問を追加します。

$(document).ready(function() { 
$('.slidebox*').hide(); 

// toggles the slidebox on clicking the noted link 
    $("#faqwrap1 a:not(div.slidebox a)").click(function() { 
     $("#faqbox1.slidebox").slideToggle('normal'); 
     $('div.slidebox:not(#faqbox1)').slideUp('normal'); 

return false; 
    }); 
}); 

は、私は多分このように、宣言された変数で何かを考える：

for (var x = 0; x < 100; x++;) { 
$('#[id^=faqwrap]'+ x 'a:not(div.slidebox a)')... 
} 

私はこれがあなたのために十分に明確であると思います！再び、私は事前に感謝します。 :)これを処理する

Answer 1

あなたの現在のマークアップを変更せずに、これは動作します：

// toggles the slidebox on clicking the noted link 
$("div[id=^faqwrap]").each(function() { 
    var $faqwrap= $(this); 
    $faqwrap.find("h4 > a").click(function() { 
    var $currentSlidebox = $faqwrap.children(".slidebox"); 
    $currentSlidebox.slideToggle('normal'); 
    $('div.slidebox').not($currentSlidebox).slideUp('normal'); 
    return false; 
    }); 
}); 

たぶん、あなたはあなたを助ける上記のコードではいくつかの提案を見つけることができます。

@Berinと同様に、別のCSSクラスを外側のDIVに与え、セレクタとして$("div[id=^faqwrap]")の代わりに使用することをおすすめします。

Answer 2

最良の方法は、IDを使用しないことですが、外側の要素のクラスを使用します。あなたのPHPは次のよ​​うに変更されます：

<?php var $faqnum = 0; $faqnum++; ?> 
<div id="faqwrap<?php $faqnum; ?>" class="question">  
    <h4><a href="#faq<?php $faqnum; ?>" class="slidetoggle">What data is shared?</a></h4>  
    <div id="faqbox<?php $faqnum; ?>" class="slidebox"> 
     <p>Data sharing is defined by the type of service:</p> 
     <ul class="list"> 
      <li>Third-party access to data (Enhanced Services only is strictly controlled and determined by the SDA)</li> 
      <li>All members must participate in points of contact and conjunction assessment but can choose whether to participate in other services</li> 
      <li>Participation in a service requires the member to provide associated data<br /> 
     </ul> 
    </div> 
</div> 

あなたのJQueryは、クラス "question"のセレクタで書き直されます。

$(document).ready(function() {  
$('.slidebox*').hide();  

// toggles the slidebox on clicking the noted link  
$(".question a:not(div.slidebox a)").click(function() { 
    /* close everything first */ 
    $('div.slidebox').slideUp('normal');  
    /* selects and opens the the slidebox inside the div */ 
    $(".slidebox", this).slideToggle('normal'); 

    return false;  
});  
});  

これは、あなたが探している効果を得るでしょう。 JQueryの主な違いは、クリックした質問の中にスライドボックスを入れる方法です。私は範囲指定された選択$(".slidebox", this)を使用して、クリックされた ".question"要素内のスライドボックスを取得しています。

微妙な視覚差）slideUp（）は（slideToggle前に起こることです。これにより、開いているクエリが目的のクエリを開く前に閉じられます。あなたのアニメーションを速く保つなら、これは罰金以上になります。この方法の利点は、ページ上の質問の数を心配する必要がなく、セレクタがforループよりも最適化されている可能性が高いことです。

idの代わりに "slidetoggle"のクラスを使用するようにPHPコードを調整しました。同じIDを複数持つことは、技術的にはHTMLエラーです。それは、不利益を持つ人々のための支援技術を捨てることができます。私はコードのセクションがページ上で何回か繰り返されたと仮定しています。