Question

如何在一组元素上选择给定选择器的第一个匹配项？

例如，假设我有以下HTML：

<ul>
<li>foo</li>
<li>bar</li>
<li class="interesting">red</li> 
<li class="interesting">yellow</li> 
<li class="interesting">blue</li>
</ul>

<ul>
<li>eggs</li>
<li>spam</li>
<li class="interesting">circle</li> 
<li class="interesting">square</li> 
<li class="interesting">triangle</li>
</ul>

<ul>
<li>tofu</li>
<li>bacon</li>
<li class="interesting">circle</li> 
<li class="interesting">square</li> 
<li class="interesting">triangle</li>
</ul>

我希望选择器为每个.interesting检索第一个 ul元素。

所以在这种情况下：

$("ul .interesting:magic-selector");

符合以下条件：

<li class="interesting">one</li> 
<li class="interesting">red</li> 
<li class="interesting">circle</li>

在尝试了第一个孩子之后（嗯......）

我正在尝试:first-child选择器，它似乎不起作用，至少在Chrome中不起作用。

以下是一些示例代码：

<ul>
<li>foo</li>
<li>bar</li>
<li class="interesting">red</li> 
<li class="interesting">yellow</li> 
<li class="interesting">blue</li>
</ul>

<ul>
<li>eggs</li>
<li>spam</li>
<li class="interesting">circle</li> 
<li class="interesting">square</li> 
<li class="interesting">triangle</li>
</ul>

<ul>
<li>tofu</li>
<li>bacon</li>
<li class="interesting">circle</li> 
<li class="interesting">square</li> 
<li class="interesting">triangle</li>
</ul>

<script type="text/javascript">
    $(document).ready(function () {
        $("ul .interesting:first-child").css('color', 'red'); // nothing happens
            // maybe I have the order wrong? only:
        $("ul .interesting :first-child").css('color', 'orange'); // nothing happens
        $("ul :first-child.interesting ").css('color', 'yellow'); // nothing happens
        $("ul :first-child .interesting ").css('color', 'green'); // nothing happens
        $("ul :first-child").css('color', 'gray'); // the control; it turns foo, eggs, and tofu gray
    });
</script>

看起来似乎first-child只能选择父元素的第一个子元素，而不是父元素的第一个匹配选择器。

除此之外，我想我必须做类似的事情：

$("ul").each(function () {
    $(this).find(".interesting:first")…
});

Answer 1

:first-child＆lt; - 尝试magic-selector的尺寸。

Answer 2

尝试使用第一个子选择器。 http://api.jquery.com/first-child-selector/

Answer 3

$("ul .interesting:first")

应该做的伎俩

Answer 4

:first-child

那将是你正在寻找的魔术选择器

编辑：打败它！

jQuery选择器首先匹配一组元素

在尝试了第一个孩子之后（嗯......）

4 个答案: