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

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

本文关键字：this 访问 元素 jQuery      更新时间：2023-09-26

我有以下代码:

$(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()，但我不确定如何实现这一点，当我使用$(this)。

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

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

使用$(this)和jQuery的.find()，你可以得到你选择的子元素:

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

有多种方法可以做到这一点。其他人在这里提到了其中一种方法(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

相关文章：