两个 div 相同的类，仅获取 THIS div 的标题答案

【问题标题】：two divs same class, get title only of THIS div两个 div 相同的类，仅获取 THIS div 的标题
【发布时间】：2013-04-24 12:51:22
【问题描述】：

我认为这很容易，但我被卡住了，找不到解决方案。我有两个 div，都是同一个类。不同的是每个里面的内容。我试图从每个中获取文本和值，但输出来自它们两个。我有一个图像，当它被点击时，我想从图像所在的这个 div 中获取值。这是我的代码：

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

在 javascript 中：

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

当我这样做时，我得到“我是标题我是第二个标题”。是否有一种全局方式只显示单击图像的 div 的标题？

【问题讨论】：

顺便说一句，你不应该在同一个页面中有多个 h1 标签，这在语义上是不正确的。
你不需要br 在h1 之后，因为它是一个块元素（如果你需要间距使用CSS）
另外，您可能想在点击处理程序的末尾将href 更改为# 和return false。
@user2025469 stackoverflow.com/questions/134845/… and stackoverflow.com/questions/3498492/… and stackoverflow.com/questions/5237105/…
如果a 没有anchor 的真正用途和语义价值，您可以简单地删除它并将clickme 类和处理程序附加到img 本身，它会阻止附加到 url 的哈希值。 cursor: pointer上面的CSS会显示手形光标

标签： javascript jquery variables

【解决方案1】：

你需要使用this:

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

【讨论】：

谢谢，我会用这个。它可以工作，@billyonecan 解释了如何上下遍历 DOM 树。等待接受它...
如果你去掉br，你也可以使用$(this).prev()，并且可以保证h1总是在a.clickme之前

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

使用this 选择器，然后在其父级中找到h1。

【讨论】：

没错，最好使用sibling。但我看到有人回答了sibling，所以我只想提供另一种方法。关于parent。使用closest 更安全，因为如果我没记错的话，父母不会在第一个符合您条件的元素处停下来，但它会进一步上升。