How get img src in jQuery?

Question

I am beginner in js / jQuery.

I have this code:

var imageArray = [];
    $(document).on("click", ".showPrv", function () {
        $("#dropzone").each(function () {
            $(".dz-image-preview").each(function () {
                $(".dz-image").each(function () {
                    console.log($(this));
                });
            });
        });
    });

this return me:

[Log] k (1) (1, line 734)
0 
<div class="dz-image">
<img data-dz-thumbnail alt="11" src="http://pscms2.test/upload/DZ_TEXT_PAGE/d3320b13a0f9c35bcdc98534b3aba06f.jpeg">
</div>

Prototyp k

[Log] k (1) (1, line 734)
0 
<div class="dz-image">
<img data-dz-thumbnail alt="12" src="http://pscms2.test/upload/DZ_TEXT_PAGE/3c5ed6a66822be7ea490b9e446de1451.jpeg">
</div>

Prototyp k

[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)
[Log] k [<div class="dz-image">] (1) (1, line 734)

I need to add src content to the imageArray array. The array must have unique src values (no duplicates). How can I do this?

The effect I want to achieve:

imageArray = ['http: //pscms2.test/upload/DZ_TEXT_PAGE/d3320b13a0f9c35bcdc98534b3aba06f.jpeg', 'http: //pscms2.test/upload/DZ_TEXT_PAGE/3c5ed6a66822be7ea490519.j4']

Please help me

Answer 1

You need to select the img element from the selected element, you can use .find() , then use .attr('src') to get the src attribute value and push to the array with arr.push()

Try this

 var imageArray = []; $(document).on("click", ".showPrv", function () { $("#dropzone").each(function () { $(".dz-image-preview").each(function () { $(".dz-image").each(function () { const src = $(this).find("img").attr("src") if(imageArray.indexOf(src) < 0) imageArray.push(src) }); }); }); });