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!!!!');

DEMO： http://jsfiddle.net/kjV5j/1/

Answer 2

这应该有效：

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

jsFiddle demo

与jQuery支持的非标准:first伪类相比，在本机支持querySelectorAll()的浏览器（IE9 +）中，这应该更快更快。

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');
});

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

4 个答案: