Javascript image src attribute returns wrong value

Question

I have a little javascript code attached to a button with onclick to the following code:

function ondelete () {

    var getDiv = document.getElementById("imgdiv");
    var lb_img = $("#imgdiv").children();
    for (var i = 0; i < lb_img.length; i++) {
        console.log(lb_img[i].src);
    }
}

This returns a single output which is great, this is the corresponding html when opened in chrome with F12 developers tool:

<div id="imgdiv" class="modal-body next">
    <img draggable="false"src="http://(urlfrommywebsite)/A_LANX/get/OTc1/179f42">
</div>

So the code should return that src attribute, but instead it returns

http://127.0.0.1/stage/local/admin/galleries/gallery/2

which is my url. On other images it returns the value of another img or this same url, really weird. This all happens inside a lightbox, so the normal code without a lightbox open is

<div id="imgdiv" class="modal-body next"></div>

I'm really stuck here, so a little help is really usefull :)

EDIT:

No answer seems to help so far, any recommendations for other lightboxes with maybe a function like getImage() or something simular?

p.s. fancybox doesn't quitte work for me either.

Answer 1

you can try this:

function ondelete() {

        var lb_img = $("#imgdiv").children();
        for (var i = 0; i < lb_img.length; i++) {
            console.log(lb_img[i].getAttribute("src"));
        }
    }

for more info about attr() and getAttribute() see this post:Difference between jQuery's attr() and getAttribute()

Answer 2

Use jQuery's attr() to get attributes

$("img").attr("src");

Edit the selector accordingly

http://jsfiddle.net/b3xdgn83/1

Answer 3

You are using this code to get the image url.

<div id="imgdiv" class="modal-body next">
<img draggable="false" src="http://wallpoper.com/images/00/31/33/51/black-background_00313351.jpg">

jQuery Code :

$( document ).ready(function() {
alert($('#imgdiv img').attr('src'));

});

Live Demo