Jquery: Append array elements to div-CodePudding

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'}" >');
   });
})

HTML:

<div  data-id="1">
  <div >
    <img src="./ДИВАН 1.jpg"  data-id="a1">
  </div>
  <div >
    <img src="./ДИВАН 2.jpg"  data-id="a2">
  </div>
</div>

<div  data-id="2">
  <div >
    <img src="./ДИВАН 3.jpg"  data-id="a1"></div>
    <div >
      <img src="./ДИВАН 4.jpg"  data-id="a2">
    </div>
  </div>

  <div ></div>

How can I get children's only src attribute value and append image with these src values to div?

CodePudding user response：

You can do it like this:

$(document).on('click', '.customers__photo', function() {

  let img_array = $(this).children().map(function()  {return $(this).attr("src")}).get();
  img_array.forEach(function(src) {
    $(".pushed").append(`<img src="${src}" >`);
  });
})

Demo

$(document).on('click', '.customers__photo', function() {

  let img_array = $(this).children().map(function() {
    return $(this).attr("src")
  }).get();
  img_array.forEach(function(src) {
    $(".pushed").append(`<img src="${src}" >`);
  });
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div  data-id="1">
  <div >
    <img src="./ДИВАН 1.jpg"  data-id="a1">
  </div>
  <div >
    <img src="./ДИВАН 2.jpg"  data-id="a2">
  </div>
</div>

<div  data-id="2">
  <div >
    <img src="./ДИВАН 3.jpg"  data-id="a1"></div>
  <div >
    <img src="./ДИВАН 4.jpg"  data-id="a2">
  </div>
</div>

<div ></div>