Question

我需要在点击的特定div中选择并找到H2标签的html值，这就是我现在正在尝试的但是无济于事：

单击.square时，我正在尝试运行：

 $(this).find('h2').html();

这就是html的样子：

<div class="square" id="2"><h2>Title</h2><h3>Comment</h3></div>

我做错了什么？

由于

Answer 1

您的代码必须放在点击处理程序中，如下所示：

$('.square').on('click', function() {
    alert($(this).find('h2').html());
}

在点击处理程序之外，this指向window而$(window).find('h2')找不到任何内容，因此.html()会产生undefined。

如果动态生成<div class="square">，则需要将点击处理程序“挂钩”到不会从页面中消失的最近元素。

$('#element_id').on('click', '.square', function() {
    alert($(this).find('h2').html());
}

Answer 2

也许您必须在文档准备好后运行代码。

$(function() {
    $(".square").click(function() {
        console.log($(this).find('h2').html());
    });
});

$(function() {});是撰写$(document).ready(funciton() {});的简短方法。

此外，您的代码必须作为click事件侦听器的回调。

Answer 3

更有效的方法是：

$('body').on('click', '.square', function(event) {
  var  html =  $(this).find('h2').html();
  console.log(html);
});

Answer 4

您的代码完全正确。您可以在此处（或fiddle）上看到应用程序的示例：

<script>
$(document).ready(function(){
    $("div#2").click(function(){
        var title = $(this).find('h2').html();
        $("span").text(title);
    });
});
</script>

<div class="square" id="1"><h2>I'll not work because my id is 1</h2></div>
<div class="square" id="2"><h2>Click me and you'll see me below on the span!</h2></div>
<span></span>

$（this）div中标题的jQuery选择器

4 个答案: