jquery - クラスの 1 つのインスタンスだけにアクションを適用する方法

Question

フィールドを動的に生成する必要があるフォームがあり、それらのフィールドにはさまざまな jquery 関数が呼び出されています。基本的に、ユーザーが選択した内容に基づいてさまざまなオプションを表示するために、slideUp と slideDown を使用しています。次のコードを検討してください

    <div class="test">
    <div class="red" style="width:100px;height:100px;background-color:red; margin-bottom:10px;"></div>
    <div class="green" style="width:100px;height:100px;background-color:green;margin-bottom:10px;"></div>
</div>

<div class="test">
    <div class="red" style="width:100px;height:100px;background-color:red;margin-bottom:10px;"></div>
    <div class="green" style="width:100px;height:100px;background-color:green;margin-bottom:10px;"></div>
</div>

そして、jquery

$('.green').hide();

        $('.red').click(function(){
            $('.green').show();
            });

基本的に、赤いボックスの後にある緑のボックスのみを表示したい. この例は単純で、コードを複製して 2 番目のアイテムに別の ID を与えることもできますが、実際のフォームはもっと複雑なので、各「テスト」div 内のクラス名でアイテムをターゲットにする方法を見つけたいと考えています。 .

Answer 1

私がやりたいのは、各「テスト」div内のクラス名でアイテムをターゲットにする方法を見つけることです.

簡単です：

$('.red').click(function(){
    $(this).closest('.test').find('.green').show();
});

Answer 2

next() メソッドを使用できます。

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

Answer 3

両方の答えは良いです、私はちょうど別のオプションを追加しています:

$('.red').click(function () {
    $(this).siblings('.green').show();
});

Jquery ドキュメント: http://api.jquery.com/siblings/

Answer 4

変化する

$('.green').show();

に

$(this).parent('.test').children('.green').show();