jQuery next,parent,nearest

Question

HTML:

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

图像上的Click事件必须触发相关h2上的单击事件.html会自动呈现.

JS:

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

什么是最好的解决方案是这种情况,我尝试最接近,但它不会触发h2点击事件.

这很好用:

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

Answer 1

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.