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

【问题标题】：How do I access a sub-element when using $(this) in jQuery在 jQuery 中使用 $(this) 时如何访问子元素
【发布时间】：2015-08-05 14:07:28
【问题描述】：

我有以下代码：

$(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) 时如何实现这一点。

【问题讨论】：

【解决方案1】：

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

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

【讨论】：

你可能打败了他？
@xcdemon05 不是我，我的分数没有下降。谢谢你的暗示......
@ahrim Lol 我没有指责你。我的意思是，也许有人想给出 Milind 的答案，宁愿为社区做出贡献，无论如何，他/她决定不给他投票是唯一的解决方案。
@xcdemon05 奇怪的是，你怎么能从你的陈述中得到所有这些，而大多数人会认为你的陈述是对前者的指示。这甚至被你一笑置之的必要性所强化。显然你觉得有必要发表一个你现在试图否认的有趣评论......
@ahrim 请注意，是您因为与您无关的评论而变得不正常。你怎么能读懂“你可能打败了他？”并认为“他一定是在谈论我！！！”？当有成千上万的其他用户时？有人对他投了反对票。我只是在说，也许那个人很不高兴，因为他还没来得及回答。

【解决方案2】：

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

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

【讨论】：

【解决方案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

【讨论】：