Question

HTML：

<div class="container">
      <span class="foo">a</span>
      <span class="bar">1a</span>
      <span class="bar">2a</span>
</div>
<div class="container">
      <span class="foo">b</span>
      <span class="bar">1b</span>
      <span class="bar">2b</span>
</div>
<div class="container">
      <span class="foo">c</span>
      <span class="bar">1c</span>
      <span class="bar">2c</span>
</div>

<div class="title">Debug:</div>
<pre id="debug"></pre>

JS：

var debug      = $('#debug');
var containers = $('.container');
var foos       = containers.children('.foo');
var bars       = foos.siblings('.bar:first');


bars.each(function(){
    debug.append($(this).text() + '\n');
});

返回的第一个bar会发生什么，而从OOP POV中，您会认为每个容器的第一个栏都会被返回。

当我在评论中留下时，我会挂断为什么:first应用于结果集而不是搜索集。

我认为逻辑是：循环遍历foos数组，找到所有兄弟姐妹，但只返回第一个，将它添加到数组结果堆栈，继续下一个foo。 / em>

相反，它是：遍历foos数组，找到所有兄弟姐妹，将它们添加到结果堆栈，选择第一个。

我认为它应该更像find()其中：

containers.find('.bar:first')返回我正在寻找的结果

containers.find('.bar').first(':first')返回我目前得到的结果（OOP有意义）

Answer 1

当你首先使用时，你告诉jQuery从你给它的列表中找到第一个没有考虑父母的东西。要获得结果，请询问使用它：

var bars       = foos.next('.bar');

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

您也可以循环使用容器：

var debug      = $('#debug');
var containers = $('.container');

containers.each(function(){
    debug.append($(this).find(".bar:first").text() + '\n');
});

Answer 2

这就是它的设计方式：

http://api.jquery.com/first-selector/

根据定义，它只能返回一个元素。我希望功能是你描述的。这对我来说更直观，但它不能通过构造工作。

Answer 3

因为这就是它的方式。 :first只是.eq(0)的缩写（它甚至不是很短，只是另一种方式）。

如果我理解您的想法:first应该做什么，那么您应该看看:first-child。

来自jQuery文档：

：第一个伪类相当于：eq（0）。它也可能是写作：lt（1）。虽然这只匹配一个元素，：第一个孩子可以匹配多个：每个父母一个。

Answer 4

当我第一次阅读这些定义时，这些定义让我头晕目眩，但基本上是：

:first返回第一个元素来自包装集，而
:first-child返回其父容器中第一个子元素的任何元素。

所以:first查看你的jQuery对象，:first-child查看实际的HTML容器。

这听起来有些糟糕，但希望这是有道理的。：d

jQuery：为什么``first`只返回结果数组的第一个而不是选择器

HTML：

JS：

4 个答案: