JQuery unable to get the previous image src

Question

i have this scenario:

<img class="prev" data-modal-img-src="asd"/>
<span></span>
<img class="next"/>

now on cllick i want to get the .prev img element src attr, and i do:

$(function(){
$('span').bind('click',function(){
 var _img_src = $(this).prev('img').attr('data-modal-img-src');
 alert(_img_src);
});
});

it doesn't works as expected, any suggestion?

PS: do not use -1 like is rayining -1

Answer 1

To get the prev they should have common parent could by body tag or div etc. and you do not have attribute 'data-modal-img-src' . You should use on instead of bind as bind is deprecated . Also use data() instead of attr() for data attributes.

prev() , Get the immediately preceding sibling of each element in the set of matched elements, optionally filtered by a selector, jQuery documents .

Live Demo

<img class="prev" data-modal-img-src = "123"/>
<span></span>
<img class="next"/>

$(function () {
    $('span').bind('click', function () {
        var _img_src = $(this).prev('img').data('modal-img-src');
        alert(_img_src);
    });
});

Using data()

Live Demo

$(function () {
    $('span').bind('click', function () {
        var _img_src = $(this).prev('img').data('modal-img-src');
        alert(_img_src);
    });
});

Answer 2

使用data()而不是attr()

$(this).prev('img').data('modal-img-src')