jQuery next, parent, closest

Question

HTML:

<div class="container">
  <ul>
    <li class="item" id="id_1">
      <h2>header</h2>
      <div class="c_image">
        <img/>
      </div>
    </li>
  </ul>
</div>

点击图片必须触发相关h2标签的点击事件。HTML会自动渲染。

JS：

$(".container .item .c_image img").each(function(){
  $(this).click(function(){
    //console.log($(this).parent("li.item"));
    $(this).closest("h2")[0].click();
  });
});

在这种情况下，最好的解决方案是什么？ 我尝试了closest，但它不能触发h2的点击事件。

这个可以正常工作：

$('#id_1 .c_image img').click(function(){
  $('li#id_1 h2')[0].click();
});

- Babulaas

Answer 1

closest('h2') 在这里不起作用，因为 h2 是 img 元素的父级同级。你需要获取最接近的 li，然后使用 find() 方法查找 h2：

$(".container .item .c_image img").click(function(){
    $(this).closest('li').find("h2").click();
});

请注意，您无需迭代元素，并且如果您将事件附加到

而不是

，则可以避免需要此代码，因为事件将从和

冒泡。

- Rory McCrossan

Answer 2

h2元素是点击的图像父元素的前一个兄弟元素。因此，您可以使用.parent()和.prev()选择器。

此外，您无需逐个迭代元素来为它们附加相同的事件。您可以简单地将事件绑定到返回的图像对象上。就像这样：

$(".container .item .c_image img").click(function(){
   $(this).parent().prev().click();
});

- Milind Anantwar

Answer 3

引用“单击图像事件必须触发相关h2上的单击事件。”假设无论单击图像还是标题，都必须发生相同的事件。

您是否可以将单击事件放置在li上而不是其他地方？

$(".container li").on("click", function(){
    var $this = $(this);
    var heading = $this.find('h2').html();
    console.log(heading);
});

无法在没有进一步了解原因的情况下提出比他人更好的建议吗？

- Seabizkit