Question

我有这个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元素的第一个锚点，以及每个li的第二个锚点如何在不添加任何额外ID或类的情况下如何？

好吧，我试过了：

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

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

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

然而，这并不适用于获得每个李的第一个锚点。有什么想法吗？

修改所以我想我做得对，但它没有用，因为我有一个输入文本框，似乎使它无法正常工作。一旦输入框出现，它为什么不再起作用？

Answer 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 =＆gt;过滤a标记

的子项

a:first-child =＆gt;已选择a代码的过滤条件

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

Answer 2

“第一个/最后一个孩子”选择器（实际上所有“孩子”选择器）都考虑了所有孩子，即使是那些没有使用你想要的标签的孩子过滤

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

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

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

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

（您可以将子选择器视为具有比标签选择器更高的优先级。因此，它首先过滤掉子项，无论标记或类，然后它查看您想要的标记。这是反直觉的而奇怪，我知道:)）

Answer 3

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

您还可以执行以下操作：

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

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

   }
});

Answer 4

这就是你想要的：

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

这将选择所有＆＃34; a＆＃34; ＆＃34;＃tags＆＃34;的后代元素是其父元素的第一个锚元素子元素。只需使用2而不是1作为第二个锚点。

jQuery选择器，用于查找每组元素中的第一个子元素

4 个答案: