Jquery $(this) 子セレクター

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

  •  20-08-2019
  •  | 
  •  

質問

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

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) セレクターの子を取得するにはどうすればよいですか? しかし成功していない。

役に立ちましたか？

解決

あなたが持っている 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.

他のヒント

は、クリックイベントでは、「これは、」クリックされたタグである

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

あなたも.siblingsを使用することができてもdiv要素に到達する複数の方法が.nextなど、あります。

これは .slideToggle（）のとずっと簡単です 

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

EDITます：

それは.next作られた代わりの.siblings

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

また、あなたがで...している場所を覚えておくことはクッキーのを追加することができます。

http://c.hadcoleman.com/2008 / 09 / jqueryのスライド・トグルと、クッキー/ の

http://jqapi.com/する トラバース - >ツリートラバーサル - >子供

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