jquery - クラスのJQueryセレクターですが、次のアイテムのみ

Question

div class="Repors_comments_form"を選択する方法がわかりません。ここにそれがどのように見えるか

<div>
  <span onclick ="$('.Reports_comments_form').toggle();"  style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">
</div><!-- End of div Reports_form -->

これはループ内にあり、多くのコメントがあり、次のコメントのみが必要であることに注意することが重要です。私は多くの方法を試しましたが、私にできることはすべてのクラス要素を取得することだけです。

私は試しました

<span onclick ="$('.Reports_comments_form').toggle();"
<span onclick ="$('.Reports_comments_form').toggle().next();"
<span onclick ="$('.Reports_comments_form').next().toggle();"
<span onclick ="$('.Reports_comments_form').closest('div').next().toggle();"

Answer 1

parent()チェーンを台無しにすることなく動作の一貫性を保つには:

マークアップ:

<div>
    <a href="#" data-target="someId" class="reportButton">Report</a>
</div>
<div id="someId" class="report">

      // you'll be generating the id in the loop, e.g. 'report-12', 'report-13' and so on

</div>

JS:

$('.reportButton').click(function(e){

    e.preventDefault()

    $('#' + $(this).data('target') ).toggle()

})

Answer 2

<div>
  <span onclick ="$(this).parent().next().toggle();"  style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">
    adadadads
</div>​

Answer 3

スパンにクラスを追加すると、インライン スクリプトを完全に削除し、目立たない jQuery clcik ハンドラーを使用できます。

HTML

<div>
  <span class="reportButton" style="cursor:pointer">Report</span>
</div>
<div class="Reports_comments_form">

JS

 /* uses next() assuming you may have this button and report sequence in page multiple times*/
$(function(){
    $('.reportButton').click(function(){
              $(this).parent().next().toggle();
    })
})

ページの読み込み後にボタンが動的に追加される場合、clcik ハンドラーを使用して委任できます。on()

Answer 4

<span onclick ="$(this).parent().next('.Reports_comments_form').toggle();"