I thought this would be easy but I'm stuck and can't find a solution. I have two divs, both same class. The difference is the content inside each one. I'm trying to get the text and values from each but the output is from both of them. I have an image and when it's clicked, I want to get the value from THIS div where the image is located. Here's my code:

<div class="mainSelect">
    <h1>I am Title</h1><br>
    <a href="javascript:void(0);" class="clickme"><img class="pic" src="img/img.png"/></a>
</div>
<div class="mainSelect">
    <h1>I am Second Title</h1><br>
    <a href="javascript:void(0);" class="clickme"><img class="pic" src="img/img.png"/></a>
</div>

And in javascript:

$(document).ready(function(){
    $(".clickme").click(function(){
        var t = $("h1").text();
        alert (t);
    });
});

When I do it this way, I get "I am Title I am Second Title". Is there a global way to only display the title of the div where the image was clicked?

I thought this would be easy but I'm stuck and can't find a solution. I have two divs, both same class. The difference is the content inside each one. I'm trying to get the text and values from each but the output is from both of them. I have an image and when it's clicked, I want to get the value from THIS div where the image is located. Here's my code:

<div class="mainSelect">
    <h1>I am Title</h1><br>
    <a href="javascript:void(0);" class="clickme"><img class="pic" src="img/img.png"/></a>
</div>
<div class="mainSelect">
    <h1>I am Second Title</h1><br>
    <a href="javascript:void(0);" class="clickme"><img class="pic" src="img/img.png"/></a>
</div>

And in javascript:

$(document).ready(function(){
    $(".clickme").click(function(){
        var t = $("h1").text();
        alert (t);
    });
});

When I do it this way, I get "I am Title I am Second Title". Is there a global way to only display the title of the div where the image was clicked?

• javascript
• jquery
• variables

• 1 As a side remark, you shouldn't have multiple h1 tags in the same page, that's not semantically correct. – Laurent S. Commented Apr 30, 2013 at 14:43
• 2 you don't need a br after h1 since it's a block element (if you need spacing use CSS) – David Fregoli Commented Apr 30, 2013 at 14:46
• 1 also, you might wanna change href to # and return false at the end of the click handler. – David Fregoli Commented Apr 30, 2013 at 14:52
• 1 @user2025469 stackoverflow./questions/134845/… and stackoverflow./questions/3498492/… and stackoverflow./questions/5237105/… – Ian Commented Apr 30, 2013 at 14:57
• 1 If the a doesn't really have the purpose and semantic value of an anchor you can simply remove it and attach the clickme class and handler to the img itself and it will prevent the hash being appended to the url. cursor: pointer CSS on it will display the hand cursor – David Fregoli Commented Apr 30, 2013 at 15:07

3 Answers 3

You need to use this:

var t = $(this).siblings('h1').text();

$(document).ready(function(){
    $(".clickme").click(function(){
        var t = $(this).closest(".mainSelect").find("h1").text();
        alert (t);
    });
});

use this selector, then find h1 in its parent.

 $(".clickme").click(function(){
        var t = $(this).closest('.mainSelect').children('h1').text();
        alert (t);
 });