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

【问题标题】：jQuery selector first matches in a set of elementsjQuery 选择器首先匹配一组元素
【发布时间】：2011-11-09 03:26:58
【问题描述】：

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

例如，假设我有以下 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>

我想要为每个 ul 检索 first .interesting 元素的选择器。

所以在这种情况下：

$("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")…
});

【问题讨论】：

你不需要each，像jsfiddle.net/uAmN2 这样就可以了。但我认为没有任何:magic-selector 可以做到这一点。 CSS 等价物是 :first-of-type

标签： jquery jquery-selectors

【解决方案1】：

:first-child magic-selector 的大小。

【讨论】：

似乎不起作用，至少对于这种选择器不起作用。 :(
这是大错特错，因为:first-child 只匹配（猜猜看）第一个孩子。所以如果li.interesting 不是第一个孩子，:first-child 将不匹配。对应的CSS3选择器其实是:first-of-type

【解决方案2】：

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

【讨论】：

【解决方案3】：

$("ul .interesting:first")

应该做的伎俩

【讨论】：

不幸的是，没有。那只会得到第一个匹配项。

【解决方案4】：

:first-child

这将是您正在寻找的神奇选择器

编辑：被打败了！

【讨论】：