在jQuery中选择另一个类的元素的类子元素的第一个元素答案

【问题标题】：Selecting first elements of a class children of elements of another class in jQuery在jQuery中选择另一个类的元素的类子元素的第一个元素
【发布时间】：2012-11-13 03:16:37
【问题描述】：

我想使用 jQuery 选择一个类的第一个元素，它们是另一个类的元素的子元素。请查看下面的示例以了解我的问题。

<div class="a">
    <div class="c"></div>
    <div></div>
    <div class="b">Select this</div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<div class="a">
    <div></div>
    <div class="c"></div>
    <div class="b">Select this</div>
    <div class="b"></div>
    <div class="b"></div>
</div>
<div class="a">
    <div class="b">Select this</div>
    <div class="b"></div>
    <div class="b"></div>
    <div></div>
    <div class="c"></div>
</div>

我想在 jQuery 中编写一个代码，它将选择 a 类的所有元素下 b 类的所有第一个元素。

如果我在 jQuery 中使用以下代码，它不起作用：

$(".a div.b:first-child").html('Changed!!!!');

如何选择那些我在 html 中标记为“选择这个”的 div？

【问题讨论】：

标签： jquery html css-selectors

【解决方案1】：

使用:first 代替:first-child 并且还对特定部分使用.find。见下文，

$(".a").find("div.b:first").html('Changed!!!!');

演示： http://jsfiddle.net/kjV5j/1/

【讨论】：

> 因为 :first 是一个 jQuery 扩展而不是 CSS 规范的一部分，所以使用 :first 的查询不能利用原生 DOM querySelectorAll() 方法提供的性能提升。
@MaratTanalin first-child 表示作为其父元素的第一个子元素的任何元素。我认为它不能用于这种情况。
这种情况可以通过my answer中的两个选择器完美解决。

【解决方案2】：

试试这个：

    $(".a div.b:eq(0)").html('Changed!!!!'); 
    // OR
    $(".a div.b:first").html('Changed!!!!');

【讨论】：

【解决方案3】：

如果您想更改带有“选择此”的标签中的文本：

$('.a div').each(function()
{
  if ( $(this).html() == 'Select this' )
    $(this).html('changed');
});

【讨论】：

元素不会总是有“Select This”，他只是用那个作为例子。

【解决方案4】：

这应该可行：

.a > .b:first-child, .a > :not(.b) + .b

jsFiddle demo

与 jQuery 支持的非标准 :first 伪类相比，这应该在原生支持 querySelectorAll() (IE9+) 的浏览器中更快工作。

【讨论】：