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

这很好用:

$('#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 冒泡。