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: stackoverflow.com/questions/4146502/… — kevin b.
– kevin b., Commented Apr 3, 2017 at 12:11
$('img[data-highres]') or $(this).closest('map[name="img"]').prev('img') — Rajesh Dixit
– Rajesh Dixit, Commented Apr 3, 2017 at 12:11

Terry · Accepted Answer · 2017-04-03 12:11:01Z

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 3, 2017 at 12:11

Terry

66.7k16 gold badges107 silver badges127 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Greg Ostry Over a year ago

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

Terry Over a year ago

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.

Greg Ostry Over a year ago

okey i have a solution for this problem. i added a continuous nummeration -> #image1, #image2 and so on

dekts · Accepted Answer · 2017-04-03 12:26:37Z

1

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>

answered Apr 3, 2017 at 12:26

dekts

8306 silver badges21 bronze badges

Comments

Konstantinos · Accepted Answer · 2017-04-03 12:34:12Z

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 3, 2017 at 12:34

answered Apr 3, 2017 at 12:12

Konstantinos

9731 gold badge10 silver badges20 bronze badges

Comments

Madhavi Krishnayya · Accepted Answer · 2017-04-03 12:45:34Z

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

Greg Ostry · Accepted Answer · 2017-04-03 14:02:14Z

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

Collectives™ on Stack Overflow

How to select previous element in jquery?

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

3 Comments

Comments

Comments

Comments

Comments

Linked

Related