在 jQuery 中使用 $(this) 时如何访问子元素

Question

我有以下代码：

$(document).ready(function(){

    $(document).on('click', '.mydiv', function(){
        console.log(??????);
    });

});

我也有对应的html

<div class="mydiv">
    <p>Hello from inside a mydiv</p>
</div>
<div class="mydiv">
    <p>Hello from inside some other mydiv</p>
</div>

我的目标是当我用 mydiv 的 class 单击任何 div 时，将 p 标签内的文本打印到控制台。我知道这意味着我应该使用 $(this) 运算符，但是当我这样做时我不确定如何访问它的子元素。

我知道如果我正在使用 id（或者如果我只有这些 class 对象之一）我可以简单地做 $('#mydiv p').val()，但是我不确定如何实现这个当我我正在使用 $(this).

Answer 1

您可以使用 $('p',this) 或 $(this).find('p') 获取 this 上下文中的 p 标签元素：

$(document).on('click', '.mydiv', function(){
    console.log($('p',this).text());
});

Answer 2

使用 $(this) 和 jQuery 的 .find() 您可以获得您选择的子元素：

console.log($(this).find('p').html());

Answer 3

有多种方法可以解决这个问题。其他人在这里提到了其中一种方法（find 方法）。 find 方法的问题在于它会找到 div 中的所有元素，而不是直接子元素。因此，如果您有嵌套在另一层的元素，它也会得到它。

使用 children 方法，它会找到元素的直接子元素，但不会找到嵌套更深的元素。

<div class="mydiv">
    <div>
        <p>Nested p</p>
    </div>
</div>

$('.mydiv').find('p'); // Finds this element, but children() will not

对

<div class="mydiv">
    <p>
        Direct p
    </p>
 </div>

 $('.mydiv').children('p'); // Will find this element, but find() will as well

使用 find 方法，您将找到嵌套在第二个 div 中的子项，而使用 children 方法，您将仅找到直接子项。

根据您的需要，您可以使用find或children

How do I access a sub-element when using $(this) in jQuery