在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类的div时，将p标签内的文本打印到控制台。我知道这意味着我应该使用$（this）运算符，但是当我这样做时，我不确定如何访问它的子元素。

我知道如果我使用id（或者如果我只有一个这样的类对象）我可以简单地$('#mydiv p').val()，但我不确定如何实现这个目标＃39; m使用$（this）。

Answer 1

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

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

<强> Working Demo

Answer 2

使用$(this)和jQuery＆＃39; .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