jQuery 选择器在一组元素中的每个元素中查找第一个子元素答案

【问题标题】：jQuery selector to find the first child in each of a set of elementsjQuery 选择器在一组元素中的每个元素中查找第一个子元素
【发布时间】：2015-07-02 07:34:07
【问题描述】：

我有这个 HTML：

<div id="tags">
    <ul>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
        <li><input type="text" /><a href="#">First Link</a> <a href="#">Second Link</a></li>
    </ul>
</div>

我将使用什么选择器来捕获每个 li 元素的第一个锚点，以及如何在不添加任何额外 id 或类的情况下捕获每个 li 的第二个锚点？

嗯，我试过了：

$('#tags a:last-child')

而且我能够获得每个 li 的第二个锚点，但我不明白为什么会这样。一个元素是否需要在锚点内才能选择某些东西，但它能够选择每个 li 的第二个锚点。后来我不在乎它是如何工作的，只要它有效，所以我想我会做同样的事情来获得第一个元素：

$('#tags a:first-child')

然而，这并不能获得每个 li 的第一个锚点。有什么想法吗？

编辑： 所以我想我做得对，但它不起作用，因为我在那里有一个输入文本框，这似乎使它不起作用。为什么有输入框就不行了？

【问题讨论】：

供您将来参考，请注意，解决方案与“如何选择特定表中第 nth 列中的td 元素？”相同。
下面的答案很好，但你的$("#tags a:first-child") 为我工作......

标签： jquery selector

【解决方案1】：

我将使用什么选择器来捕获每个 li 元素的第一个锚点

$("#tags li a:first-child") 或 $("#tags li a:nth-child(0)")

如果不添加任何额外的 id 或类，每个 li 的第二个锚点如何？

$("#tags li a:last-child") 或 $("#tags li a:nth-child(1)")

:*-child 选择起作用的原因是因为它是对 a 标记的过滤，而不是 a 标记的子标记。

a :first-child => 过滤a 标签的子元素

a:first-child => 筛选 a 选定标签

这里的工作示例：http://jsfiddle.net/7vupb/

【讨论】：

感谢您解释冒号前的空格。是的，这适用于我发布的原始代码。我现在编辑了原始帖子，因为我在两个锚点之前还有一个输入框，我认为这两个锚点无关紧要并且从未发布过，但显然这是它对我不起作用的原因。我编辑了第一篇文章以显示更改。在这种情况下，选择器需要是什么？
感谢您解释冒号前的空格。

【解决方案2】：

":first/last-child" 选择器（实际上是所有的 'child' 选择器）考虑到所有子元素，即使是那些没有使用您尝试使用的标签的子元素过滤器。

所以$('#tags a:last-child') 有效，因为在这种情况下，锚是最后一个孩子。

但是，$('#tags a:first-child') 不起作用，因为输入是第一个孩子。

你可以使用$('#tags a:not(:last-child)')，但这会得到所有不是最后一个子元素的锚标签，所以如果你有三个它会选择前两个，如果你在最后一个锚之后有另一个元素，它将选择所有锚点。

或者你可以使用$('#tags a:nth-child(2)')，但是当然这里它依赖于第一个锚点是第二个孩子的事实，所以如果你删除输入元素，或者在第一个锚点前面添加更多元素，那么它就赢了不行。

(您可以认为子选择器比标签选择器具有更高的优先级。因此，它首先过滤掉子选择器，无论标签或类别如何，然后查看您想要的标签。这与直觉相反很奇怪，我知道:)）

【讨论】：

我觉得这确实有点奇怪，感谢您解释它是如何工作的。

【解决方案3】：

$('#tags li').find('a:first') ...

你也可以这样做：

$('#tags li').find('a').each(function(i){
   if(i==0){ //first item

   }
   if(i==1){ //second item

   }
});

【讨论】：

【解决方案4】：

这就是你想要的：

$('#tags a:nth-of-type(1)')

这将选择“#tags”元素的所有“a”后代，它们是其父元素的第一个锚元素子元素。只需使用 2 而不是 1 作为第二个锚点。

【讨论】：