jQuery 下一个,父级,最近的
jQuery next, parent, closest
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();
});
h2
元素是单击图像父级的前一个兄弟。因此你可以使用 .parent()
和 .prev()
选择器
此外,您不需要单独遍历元素来为它们附加相同的事件。您可以简单地将事件绑定到返回的图像对象。像这样:
$(".container .item .c_image img").click(function(){
$(this).parent().prev().click();
});
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
.
中冒出来
引用 "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);
});
如果不进一步了解原因,就不能提出比其他人已经提出的更好的建议吗?
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();
});
h2
元素是单击图像父级的前一个兄弟。因此你可以使用 .parent()
和 .prev()
选择器
此外,您不需要单独遍历元素来为它们附加相同的事件。您可以简单地将事件绑定到返回的图像对象。像这样:
$(".container .item .c_image img").click(function(){
$(this).parent().prev().click();
});
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
.
引用 "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);
});
如果不进一步了解原因,就不能提出比其他人已经提出的更好的建议吗?