Question

我动态显示多行div。

Div组看起来像这样：

<div class="triggerbutton">
    <img src="/images/clickme.png" alt="" />
</div>

<div class="hiddendivs" style="display:none;">
    some stuff here 
</div>

我正在使用这个JQuery：

$('.triggerbutton').click(function() {

    $('.hiddendivs').show('slow');

});

但是我只希望显示触发按钮后的hiddendivs而不是所有可用的hiddendiv。

我该怎么做？

Answer 1

假设hiddendivs是下一个兄弟姐妹，你可以使用

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

Answer 2

$('.triggerbutton').click(function() {
   $(this).closest('.hiddendivs').show('slow');
});

Answer 3

你可以在jQuery中使用.next()

$('.triggerbutton').click(function() {

    $(this).next().show('slow');

});

Answer 4

尝试使用代码。它的工作方式如下，找到类hiddendivs的下一个直接div并显示它。

$('.triggerbutton').click(function() {

    $(this).next('div.hiddendivs').show('slow');

});

Answer 5

使用next，您只会引用选择器后面的下一个元素。您还可以对以下所有div使用nextAll：

$('.triggerbutton').click(function() {
    $(this).nextAll('.hiddendivs').show('slow');
});

Fiddle here

JQuery在多个div行上显示本地div

5 个答案: