Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How To Select Previous Element In Jquery?

Post a Comment
i have an image and i would like to assign which element of the area is clickable. The red stripe shouldn't be clickable. My HTML solution: or $(this).parent('map').
  • Select the image sibling, which is by chaining .prev('img') to the selector above

    • Therefore, something like this should work:

    $('.show-modal').on('click', function(e){
    e.preventDefault();
    var highres = $(this).closest('map').prev('img').attr('data-highres');
    $('.modal').css('display', 'block');
    $('#modal-image').attr('src', highres);
});

    Solution 2:

    You can use below code, modify as per your requirements.

    var getData = $('#imgID').data("highres");
console.log(getData);
    <scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><imgsrc="url/to/your/image.jpg"id="imgID"data-highres="high"alt="image_name"usemap="#Map" /><divname="Map"id="Map"></div>

    Solution 3:

    Just add a class to your image like this: 

    <img src="" data-highres="Hello"class="imgCLASS" usemap="#img">

    and then make this: 

    var highres = $('.imgCLASS').attr("data-highres");
alert(highres); // Hello

    https://jsfiddle.net/myrma60b/1/

    Solution 4:

    Refer the element by DOM traversal: 

        $('.show-modal').on('click', function(e){//called when the element with show.modal class is clickedalert("map area clicked");
    });

    $('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clickedalert("previous element of map area is clicked");
    });

    The later one works for all types of element tags. If you want it to be specific to image types, specify the element type in prev(). i.e.,

        $('.show-modal').parent().prev('img').on('click', function (e) {//called when the element before the map area element is clickedalert("Image is clicked");
    });

    Solution 5: 

    <html><head><title></title><scripttype="text/javascript"src="https://code.jquery.com/jquery-1.12.4.min.js"></script></head><body><imgsrc="pages/dn/low/dn-02.jpg"data-highres="pages/dn/high/dn-02.jpg"usemap="#image"><mapname="image"><areaclass="show-modal"shape="rect"coords="1,1,725,1094"alt="clickable"></map><br><imgsrc="pages/dn/low/dn-03.jpg"data-highres="pages/dn/high/dn-03.jpg"usemap="#image"><mapname="image"><areaclass="show-modal"shape="rect"coords="1,1,725,1094"alt="clickable"></map><script>
    $('.show-modal').on('click', function(){
        var $this = $(this).parent('map').prev('img').attr('data-highres');
        alert($this);
    });
</script></body></html>

    here is simple code. i get all the time the same attr. ->data-highres="pages/dn/high/dn-02.jpg"

    Post a Comment for "How To Select Previous Element In Jquery?"