Question

我想创建一个简单的jQuery show函数来显示类.show-more当用户点击div时。更多：

<div class="participant" id="participant-1">

<div class="ask-more"></div>
<div class="show-more" style="display:none"></div>

</div>

<div class="participant" id="participant-2">

<div class="ask-more"></div>
<div class="show-more" style="display:none"></div>

</div>

我有以下代码（有效）：

$( ".ask-more" ).click(function() {
  $( ".show-more" ).show();
});

我的问题：目前这个函数显示了参与者id的类;我如何调整脚本以便只显示与单击的.ask-more类相同的父类中的.show-more类？即点击＃participant-1 div中的ask-more，只显示＃participant-1中的show-more，而不是两者。

请注意，我不想使用单独的＃participant-1/2引用，因为我需要这样做可以扩展数百次。我基本上要求在jQuery中进行相对查找

由于

Answer 1

使用.next()

$(".ask-more").click(function() {
  $(this).next(".show-more").show(); // or $(this).next().show();
});

Answer 2

在这种情况下，show-more是下一个兄弟元素，您可以使用.next()来获取该元素

$( ".ask-more" ).click(function() {
  $(this).next().show();
});

Answer 3

尝试使用.siblings（），如下所示：

$(this).siblings(".show-more").show();

如何使用jquery .show（）在同一个父元素中应用函数？

3 个答案: