jquery - 在jQuery中选择另一个类的元素的类子元素的第一个元素

Question

我想选择一个类的第一个元素，它们是使用 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？

Answer 1

使用:first代替:first-child和也.find用于特定部分。见下文，

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

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

Answer 2

这应该有效：

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

jsFiddle 演示

与:firstjQuery 支持的非标准伪类相比，这应该在原生支持的浏览器（IE9+）中运行得更快。querySelectorAll()

Answer 3

试试这个：

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

Answer 4

如果要更改具有“选择此”的标签中的文本：

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