如何通过jQuery获取子元素src属性值并将对应图片追加到div中？

原代码展示 #

jQuery 原代码 #

$(document).on('click', '.customers__photo', function(){ 
  let img_array = $(this).children().attr('src').ToArray(); 
  img_array.forEach(function (src) { 
    $(".pushed").append('<img src="${'img_array.src'}" class="reviews__photo">'); 
  }); 
})

HTML 原结构 #

<div class="customers__photo" data-id="1"> 
  <div class="customers__photo item"> 
    <img src="./ДИВАН 1.jpg" class="reviews__photo" data-id="a1"> 
  </div> 
  <div class="customers__photo item"> 
    <img src="./ДИВАН 2.jpg" class="reviews__photo" data-id="a2"> 
  </div>
</div>
<div class="customers__photo" data-id="2"> 
  <div class="customers__photo item"> 
    <img src="./ДИВАН 3.jpg" class="reviews__photo" data-id="a1">
  </div> 
  <div class="customers__photo item"> 
    <img src="./ДИВАН 4.jpg" class="reviews__photo" data-id="a2"> 
  </div>
</div>
<div class="pushed"></div>

错误分析 #

1. 选择器冲突：.customers__photo类同时用于外层容器和内层子元素，点击时会触发多层事件，导致重复执行代码。
2. src获取方式错误：$(this).children().attr('src')只会获取第一个直接子元素的属性，且jQuery对象没有ToArray()方法，无法正确收集所有img的src。
3. 模板字符串语法错误：原代码用单引号包裹模板字符串，且变量引用写法错误，无法正确插入src值。

修正方案 #

方案1：不修改HTML，精准绑定事件 #

通过[data-id]选择器绑定外层容器的点击事件，避免触发子元素事件；用.find('img')定位所有嵌套图片，再收集src数组：

$(document).on('click', '.customers__photo[data-id]', function(){ 
  // 收集当前点击容器下所有img的src数组
  const imgSrcArray = $(this).find('img').map(function() {
    return $(this).attr('src');
  }).get(); // 将jQuery对象转为普通数组

  // 遍历数组，追加图片到指定容器
  imgSrcArray.forEach(src => {
    $(".pushed").append(`<img src="${src}" class="reviews__photo">`);
  }); 
})

方案2：优化HTML类名（更规范） #

建议给外层容器和内层子元素使用不同类名，避免类名冲突：

<div class="customers__photo-container" data-id="1"> 
  <div class="customers__photo-item"> 
    <img src="./ДИВАН 1.jpg" class="reviews__photo" data-id="a1"> 
  </div> 
  <div class="customers__photo-item"> 
    <img src="./ДИВАН 2.jpg" class="reviews__photo" data-id="a2"> 
  </div>
</div>
<div class="customers__photo-container" data-id="2"> 
  <div class="customers__photo-item"> 
    <img src="./ДИВАН 3.jpg" class="reviews__photo" data-id="a1">
  </div> 
  <div class="customers__photo-item"> 
    <img src="./ДИВАН 4.jpg" class="reviews__photo" data-id="a2"> 
  </div>
</div>
<div class="pushed"></div>

对应jQuery代码：

$(document).on('click', '.customers__photo-container', function(){ 
  const imgSrcArray = $(this).find('img').map(function() {
    return $(this).attr('src');
  }).get();

  imgSrcArray.forEach(src => {
    $(".pushed").append(`<img src="${src}" class="reviews__photo">`);
  }); 
})

补充说明 #

如果需要每次点击前清空.pushed容器内容，避免重复添加，可在追加前加入：

$(".pushed").empty();

内容的提问来源于stack exchange，提问作者Azizxon Zufarov