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();
            });

基本上我只想要显示红色的绿色方框。虽然这个例子很简单，但我可以复制我的代码并给第二个项目一个不同的id，我的真实形式更复杂，所以我想要做的是找到一种方法来在每个“test”div中按类名对象项目。

Answer 1

我想要做的是找到一种方法，通过每个“test”div中的classname来定位项目。

足够简单：

$('.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 doc：http://api.jquery.com/siblings/

Answer 4

更改

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

到

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

如何将操作仅应用于一个类的一个实例

4 个答案: