Question

Now I have an html page that display image. Notice that the div only contain 1 image file:

<div="div_1"><img id = "img_1" src = '....' /></div>

What I would like to implement is when user double click on the div , through jquery/ js to get the “div_1” or “img_1” . In better way, get the “1” . Is it possible to implement / any function can help to achieve that?

Thanks

Updated:

The current Html code is like that

<div class="turn-page-wrapper" page="2" style="position: absolute; overflow: hidden; width: 28.5px; height: 37px; top: 0px; left: 0px; right: auto; bottom: auto; z-index: 6;">
<div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 47px; height: 47px;">
<div id="div_2" class="turn-page p2" style="width: 28.5px; height: 37px; -webkit-transform-origin: 0% 0%; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
<img id="img_2" src="demo/medium/Web081112_P002_medium.jpg" alt="flip book">
</div>
</div>
</div>

It seems my case is not that straight forward, when i use var id = $(this).attr("id"); it return page as result. If my case don’t allow me to get the attribute of page, the id of image, then it means i can not get the actual ID of individual image? thanks

Most Updated ( 1 flaw left only!)

$("div.turn-page").dblclick(function() {
var id = this.id;
num = id.split("_")[1];
alert (num);
});

Currently I am using this to get the id , however for the last result (not turn-able) when i double click it do not response or do anything. But it should be work since the class there is turn-page p7 ?

   <div class="turn-page-wrapper" page="7" style="position: absolute; overflow: hidden; width: 609.5922459893047px; height: 793px; top: 0px; right: 0px; left: auto; bottom: auto; z-index: 6;">
    <div style="position: absolute; top: 0px; left: 0px; overflow: hidden; z-index: auto; width: 1000px; height: 1000px;">
    <div id="div_7" class="turn-page p7" style="width: 609.5922459893047px; height: 793px; position: absolute; top: 0px; left: 0px; bottom: auto; right: auto;">
    <img id="img_7" src="demo/medium/Web081112_P007_medium.jpg" alt="flip book">
    </div>
    </div>
    <div style="top: 0px; left: 0px; overflow: hidden; z-index: 1; width: 610px; height: 793px;">
    </div>
    </div>

Answer 1

Like this:

$("div").dblclick(function() {
    var id = this.id,
        num = id.split("_")[1],
        imgSrc = $(this).find("img").attr("src");

    // do something with the id, the number, or the image src
});

Demo: http://jsfiddle.net/LGwK7/

This will bind a double-click handler to all div elements, so you might want to add a common class to just the ones you care about and bind to those. (I’m assuming it doesn’t make sense to bind by id because you asked how to get the id of the clicked one.)

Note that your html has an error: <div="div_1"..., should be <div id="div_1"...