web-dev-qa-db-ja.com

Jquery $（this）子セレクター

私はこれを使用しています：

jQuery('.class1 a').click( function() {
  if ($(".class2").is(":hidden")) {
    $(".class2").slideDown("slow");
  } else {
    $(".class2").slideUp();
  }
});

ページ構造：

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

次のような複数のclass1/class2セットがない場合にのみ機能します。

<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>
<div class="class1">
  <a href="...">text</a>
  <div class="class2">text</div>
</div>

クリックされたclass1の下のclass2のみに影響するように初期jqueryコードを変更するにはどうすればよいですか？ $（this）セレクターの子を取得する方法 からの推奨事項を試しましたが、成功していません。

jquerycss-selectorschildren
67
Orbalon

あなたが持っているHTMLの最良の方法は、おそらく next 関数を使用することでしょう。

var div = $(this).next('.class2');

クリックハンドラーは<a>で発生しているため、親DIVまで移動してから、2番目のDIVを検索することもできます。 parent と children の組み合わせでこれを行います。このアプローチは、作成したHTMLがまったく同じではなく、2番目のDIVがリンクに対して別の場所にある場合に最適です。

var div = $(this).parent().children('.class2');

「検索」を直接の子に限定したくない場合は、上記の例でfindの代わりに children を使用します。

また、可能な場合は常にタグ名をクラスセレクターの先頭に追加することをお勧めします。つまり、<div>タグのみがそれらのクラスを持つ場合、セレクターをdiv.class1、div.class2にします。

88
Paolo Bergantino

クリックイベントで「this」はクリックされたタグです

jQuery('.class1 a').click( function() {
   var divToSlide = $(this).parent().find(".class2");
   if (divToSlide.is(":hidden")) {
      divToSlide.slideDown("slow");
   } else {
      divToSlide.slideUp();
   }
});

Divにアクセスする方法は複数ありますが、.siblings、.nextなども使用できます。

7
John Foster

これは 。slideToggle（） を使用するとはるかに簡単です。

jQuery('.class1 a').click( function() {
  $(this).next('.class2').slideToggle();
});

編集：.siblingsの代わりに.nextにしました

http://www.mredesign.com/demos/jquery-effects-1/

Cookieを追加して、現在地を記憶することもできます...

http://c.hadcoleman.com/2008/09/jquery-slide-toggle-with-cookie/

7
Steve Perks

http://jqapi.com/ Traversing-> Tree Traversal-> Children

5
Simple Nick