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

Your html code is not supposed to have multiple element with same id. Do you really have multiple element with dropZone id ? and multiple dz-image-preview in dropZone elements ? Please provide entire dropZone html code. — SLePort
– SLePort, Commented Jul 5, 2020 at 12:10

Marik Ishtar · Accepted Answer · 2020-07-05 17:15:15Z

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

edited Jul 5, 2020 at 17:15

answered Jul 5, 2020 at 12:19

Marik Ishtar

3,0691 gold badge17 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

operloa Over a year ago

Thank you. I make this code: var imageArray = []; $(document).on("click", ".showPrv", function () { $("#dropzone").each(function () { $(".dz-image-preview").each(function () { $(".dz-image").each(function () { imageArray.push($(this).find("img").attr("src")) }); }); }); console.log(imageArray); }) - in result I have:

operloa Over a year ago

["pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/…", "pscms2.test/upload/DZ_TEXT_PAGE/… (9) - i have duplicate

Marik Ishtar Over a year ago

you want only the two images ??

operloa Over a year ago

Yes. I need array without duplicates :)

Collectives™ on Stack Overflow

How get img src in jQuery?

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related