在jQuery中获取下一个元素

问题描述

| 我有这样的标记：

<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>

点击事件在按钮上。     

解决方法

        

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

由于链接是div中的唯一元素，因此它没有兄弟姐妹，因此next（）为其返回一个空集。您需要获取父元素并为其调用next（）。     ,        它不会起作用，因为

<a>

元素不是the5ѭ元素的父级-实际上是其同级的子级。     ,        首先，针对

<a>

的父对象，如下所示：

$(\'a\').closest(\'div\').next(\'.msg\').show()

。 如果仅显示一个元素并且您不想导航到另一页，请通过添加

.preventDefault()

或

return false

来阻止

<a>

标签的自然行为。他们俩都工作。像这样：

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

   e.preventDefault();
});

您可能使用过：

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

但显然，下面的方法更有效：

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