javascript - 親/子を使用してJavaScriptで適切なdivを選択する方法

Question

私はすべてこのように見えるいくつかの異なるdivを持っています。

$(document).ready(function() {
  $(".show").click(function() {
    $(".show").parent().(".text").toggle();
  });
});

<div class="container #{i}">
    <div class="show">
        show
    </div>

    <div class="text">
        text text text
    </div>
</div>

[表示]をクリックして、コンテナdiv内のテキストdivのみを切り替えられるようにしたい。クリックしたクラス「show」で要素の親を取得できると思いました。これはコンテナ+インデックスであり、そのコンテナdivで「text」という子クラスを取得します。

これは正直なところかなり些細なことのように感じますが、私はまだJavascriptの経験が浅く、検索する文言がわかりませんでした。助けていただければ幸いです。:)

Answer 1

そのための検索機能があります

$(document).ready(function() {
  $(".show").click(function() {
    $(this).parent().find(".text").toggle();
  });
});

Answer 2

関数を使用siblingsして、同じレベルの要素を取得/フィルタリングできます。

jQuery('.show').click( function () {
   jQuery(this).siblings('.text').toggle(); 
});

詳細: http://api.jquery.com/siblings/

Answer 3

あなたは非常に近いです。親で「find」を呼び出し、.showセレクターを置き換えるだけです。これは、現在の（this）親内のdivthisのみを切り替えたいためであり、ボード全体ではありません。.textしたがって、次のようなものが必要です。

$(document).ready(function() {
  $(".show").click(function() {
    $(this).parent().find(".text").toggle(); //replaced .show for this
  });
});

または別の代替手段（他の誰かがすでに投稿していますが）

$(".show").siblings(".text").toggle();

ただし、上記が機能するには、両方の div (.show と .text) が同じレベルにある必要がありますが、 が別の要素内にネストされfindていても検出されます。.text

Answer 4

親をつかまなくてもいい...

$('.show').click(function() {
    $(this).next().toggle()
});

動作するはずです。兄弟をつかむだけです。

Answer 5

.click 関数内でこれを試すことができます

$(this).parent().find("text").toggle();