查找具有特定类的子元素

Question

我正在尝试编写代码，以搜索所有子元素中具有特定类的 DIV。该 DIV 没有 ID。这是我将要使用的 HTML。

<div class="outerBUBGDiv">
<div class="innerBUBGDiv">
<div class="bgHeaderH2">Technology Group</div>
<div class="bgBodyDiv">
<div align="center">
<img height="33" border="0" width="180" src="/heading.jpg"/>
  /////other stuff here/////
</div>
</div>
</div>

我如何获取具有类名bgHeaderH2的div元素内的文本？

- Caroline

---

抱歉，我没有恰当地解释清楚。我的$(this)是所有上面子元素的父元素，一个外部div。我需要找到哪个子元素有一个bgHeaderH2类。所以我需要做$(this).something。 - Caroline

请看我下面修改后的答案... - Ryan

Answer 1

$(this).find(".bgHeaderH2").html();

或者

$(this).find(".bgHeaderH2").text();

- Ryan

---

谢谢更新，Ryan。这个方法和Jan提出的另一个建议都有效。 - Caroline

Answer 2

根据您的评论，修改以下内容：

$( '.bgHeaderH2' ).html (); // will return whatever is inside the DIV

致：

$( '.bgHeaderH2', $( this ) ).html (); // will return whatever is inside the DIV

更多关于选择器的内容：https://api.jquery.com/category/selectors/

- Jan Hančič

---

您应该始终使用类选择器，如 'div.bgHeaderH2'，否则会有性能惩罚，请参见http://www.componenthouse.com/article-19。 - Dave Anderson

@Dave：太棒了！我写这篇文章时甚至没有想到那个技巧 :) - Jan Hančič

这个答案实际上是“在页面中查找具有特定类的任何元素”。Ryan的答案更适用于查找具有特定类的某个div的子元素的问题。 - Ryan Shea

@DaveAnderson，你的链接已经失效了，我很想知道为什么这会影响性能。 - camdixon

@camdixon 这是那篇文章 https://componenthouse.com/tag/jquery/ ，但自从我在7年前发表评论以来，已经发生了很多变化，选择器已经被优化得很好了。 下面是一些更为当前的链接供查看; jQuery中性能最佳的选择器, 优化选择器 - Dave Anderson

Answer 3

我不确定我是否正确理解了你的问题，但这并不重要，即使这个div是另一个div的子级也没关系。您可以使用以下代码从所有class为bgHeaderH2的div中获取文本：

$(".bgHeaderH2").text();

- Ondrej Slinták