two divs same class, get title only of THIS div

Question

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?

As a side remark, you shouldn't have multiple h1 tags in the same page, that's not semantically correct. — Laurent S., Apr 30 '13 at 14:43
you don't need a `br` after `h1` since it's a block element (if you need spacing use `CSS`) — David Fregoli, Apr 30 '13 at 14:46
also, you might wanna change `href` to `#` and `return false` at the end of the click handler. — David Fregoli, Apr 30 '13 at 14:52
The reason why I have "javascript:void(0)" is because it doesn't add a hash...to me it looks cleaner and the .click function still works. Can you explain or give me a link to what the difference is? Or why it would be problematic? — user2025469, Apr 30 '13 at 14:56
@user2025469 http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 and http://stackoverflow.com/questions/3498492/javascriptvoid0-vs-return-false-vs-preventdefault and http://stackoverflow.com/questions/5237105/why-use-javascriptvoid0-instead-of-javascript-as-an-href-do-nothing-plac — Ian, Apr 30 '13 at 14:57
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, Apr 30 '13 at 15:07

score 5 · Accepted Answer · answered Apr 30 '13 at 14:43

5

You need to use this:

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

answered Apr 30 '13 at 14:43

billyonecan

20,090
8
42
64

Thanks, that's the one I'll use. It works and @billyonecan explained about traversing up and down the DOM tree. Waiting to accept it... – user2025469 Apr 30 '13 at 14:50
1

you can also use `$(this).prev()` if you remove the `br` and can guarantee that the `h1` will always come before the `a.clickme` – David Fregoli Apr 30 '13 at 14:53

score 4 · Answer 2 · answered Apr 30 '13 at 14:43

4

$(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.

answered Apr 30 '13 at 14:43

Doan Cuong

2,594
4
22
39

3

You right, better use `sibling`. But I saw there's someone had answer with `sibling` so I just want to provide another approach. About `parent`. It's safer to use `closest`, because if I remember right, parent don't stop right at the first element that match your criteria but it will go up further. – Doan Cuong Apr 30 '13 at 15:00

score 0 · Answer 3 · answered Apr 30 '13 at 14:43

0

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

answered Apr 30 '13 at 14:43

Adil Shaikh

44,509
17
89
111

two divs same class, get title only of THIS div

3 Answers3