How to select previous element in jquery?

Question

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:

<img src="" data-highres="" usemap="#img"> 
<map name="img">
   <area class="show-modal" shape="rect" cords="" href="">
</map>

So when i click on the white area it should show me a modal window with "this" image.

my jquery solution:

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

When i click on the image(white area) it sould show me a high resulation image in a modal window.

I left the $("") selector empty because i don't know how to select the img attribute -> data-highres=""

I tried with the previous selector but it didn't work.

I Think this stackoverflow question can help you: http://stackoverflow.com/questions/4146502/jquery-selectors-on-custom-data-attributes-using-html5 — kevin b., Apr 03 '17 at 12:11
`$('img[data-highres]')` or `$(this).closest('map[name="img"]').prev('img')` — Rajesh, Apr 03 '17 at 12:11

score 3 · Accepted Answer · answered Apr 03 '17 at 12:11

3

Actually you have to do the following operations of DOM traversal to get what you need:

Select the parent node of the <area> element, which is <map>. This can be done either using $(this).closest('map') 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);
});

answered Apr 03 '17 at 12:11

Terry

63,248
15
96
118

with this solution i get the first image. but if i click on the second image i get a modal window with the first image – Greg Ostry Apr 03 '17 at 12:25
How is your DOM structured? Please update your question, and if possible, include an MCVE. This logic should work if your markup as mentioned in your question is repeated tandemly, i.e. img-map img-map img-map... format. – Terry Apr 03 '17 at 12:28
okey i have a solution for this problem. i added a continuous nummeration -> #image1, #image2 and so on – Greg Ostry Apr 03 '17 at 14:19

score 1 · Answer 2 · answered Apr 03 '17 at 12:26

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>

Konstantinos · Answer 3 · 2017-04-03T12:34:12.570

0

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/

edited Apr 03 '17 at 12:34

answered Apr 03 '17 at 12:12

Konstantinos

943
1
9
20

score 0 · Answer 4 · answered Apr 03 '17 at 12:45

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

score 0 · Answer 5 · answered Apr 03 '17 at 14:02

<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>

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

How to select previous element in jquery?

5 Answers5

Linked