jQuery 下一个，父级，最近的

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 click 事件。

这很好用：

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

Answer 1

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

此外，您不需要单独遍历元素来为它们附加相同的事件。您可以简单地将事件绑定到返回的图像对象。像这样：

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

Answer 2

closest('h2') 在这里不起作用，因为 h2 是父元素 img 的兄弟元素。您需要获得最接近的 li 然后 find() h2:

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

请注意，您不需要遍历 img 元素，而且如果您将事件附加到 li 而不是 h2 因为事件将从 img 和 h2.

中冒出来

Answer 3

引用 "Click event on images must trigger a click event on the related h2." 假设无论是点击图片还是点击标题，都必须发生相同的事件。

你能不能把点击事件放在 li 而不是

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

如果不进一步了解原因，就不能提出比其他人已经提出的更好的建议吗？

jQuery 下一个，父级，最近的

jQuery next, parent, closest

jquery

html

click

closest