Question

我有这样的标记：

<div>
  <a href="#">show</a>
</div>
<div class="msg" style="display: none;">message</div>

<div>
  <a href="#">show</a>
</div>
<div class="msg" style="display: none;">message</div>

<div>
  <a href="#">show</a>
</div>
<div class="msg" style="display: none;">message</div>

我想在点击父链接时显示'msg'。

这就是我所拥有的：

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

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

});

然而，这不起作用，什么都不做。有什么建议吗？

谢谢！

编辑：

这是确切的标记：

<div class="left">
    <a href="/checkout/" class="overlay_box no_thanks">&#171; Back</a>
</div>
<div class="right">
    <button type="submit" class="button link" href="'.$item->click_url.'">
    <span>'.$this->lang->line('next').'</span></button>
</div>
<div class="clear"></div>
<br/>
<div class="message" style="display: none;">
    <img src="/assets/img/icon.png" class="left"/>
    <p class="left"><b>Complete?</b> Once you have completed (<a href="/help">Help</a>)</p>
    <div class="clear"></div>

点击事件在按钮上。

Answer 1

$(this).parent().nextAll('.message:first').show();

由于链接是div中唯一的元素，因此它没有兄弟节点，所以next（）为它返回一个空集。您需要获取父元素并为其调用next（）。

Answer 2

它不起作用，因为<a>元素不是'.msg'元素的父元素 - 它实际上是它的兄弟的孩子。

Answer 3

首先，定位<a>的父级，如下所示：$('a').closest('div').next('.msg').show()。如果仅显示元素并且您不想导航到其他页面，则通过添加<a>或.preventDefault()来阻止return false标记的自然行为。他们都工作。像这样：

$('a').click(function(e){
   $(this).closest('div').next('.msg').show();

   e.preventDefault();
});

您可以使用：

$('a').parent().next()...

但显然下面的效率更高：

$('a').closest( tag ).next()...

在jQuery中获取下一个元素

3 个答案: