How To Select Previous Element In Jquery?

February 06, 2023 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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="url/to/your/image.jpg" id="imgID" data-highres="high" alt="image_name" usemap="#Map" />
<div name="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/

Baca Juga

Solution 4:

Refer the element by DOM traversal:

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

    $('.show-modal').parent().prev().on('click', function (e) {//called when the element before the map area element is clicked
    alert("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 clicked
    alert("Image is clicked");
    });

Solution 5:

<html>
<head>
    <title></title>
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
</head>
<body>
<img  src="pages/dn/low/dn-02.jpg" data-highres="pages/dn/high/dn-02.jpg" usemap="#image">
<map name="image">
    <area class="show-modal" shape="rect" coords="1,1,725,1094" alt="clickable">
</map>
<br>
<img  src="pages/dn/low/dn-03.jpg" data-highres="pages/dn/high/dn-03.jpg" usemap="#image">
<map name="image">
    <area class="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>