jQuery DOM 只选择当前的 DIV 类答案

【问题标题】：jQuery DOM select only current DIV classjQuery DOM 只选择当前的 DIV 类
【发布时间】：2014-02-03 18:42:01
【问题描述】：

我目前有一个这样的 div 列表：

<div class="product_container">
   <img src="img1.jpg">
   <div id="add_product_img"></div>
</div>

当用户点击id为add_product_img的div时，该函数运行

$('#add_product_img').click(function(){
    addImg()
});

function addImg(){
    var img = $('#multiple_product_featured_image').find('img').attr('src');
});

我需要的是让function addImg() 只选择被点击的<div id="add_product_img"></div> 的img 属性，而不是任何其他div。

我正在考虑使用 .this() 选择器，但我不确定应该如何应用它。

谢谢

【问题讨论】：

标签： jquery dom

【解决方案1】：

div 将在click 事件处理程序触发的匿名函数范围内分配给this。将this 传递给addImg 函数，然后遍历到父函数并选择img。

$('#add_product_img').click(function(){
    addImg(this)
});

function addImg(elem){
   var img = $(elem).parent().find("img").attr('src');
});

我建议遍历父级以防止标记更改时可能出现的任何问题。

【讨论】：

是的，你最后的建议好多了:)

【解决方案2】：

首先应该只有一个具有给定 id 的类，所以使用 class 属性对相似的元素进行分组

<div class="product_container">
   <img src="img1.jpg">
   <div class="add_product_img"></div>
</div>

然后将被点击的元素引用作为参数传递给addImg方法，然后使用prev()方法连同被点击的元素引用找到目标img元素

$('.add_product_img').click(function(){
    addImg(this)
});

function addImg(el){
    var img = $(el).prev('img').attr('src');
});

【讨论】：