jQuery选择器，用于查找每组元素中的第一个子元素 [英] jQuery selector to find the first child in each of a set of elements

问题描述

我有这个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或类？

What selector would I use to capture the first anchor of each li element, and how about second anchor of each li without adding any extra ids or classes?

好吧，我试过这个：

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

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

And I was able to get the second anchor of each li, but I don't understand why that works. Wouldn't an element need to be inside the anchor to select something yet it is able to select the 2nd anchor of each li. Later on I didn't care how it worked, as long as it worked so I figure I would do the same thing to get the first element which would be:

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

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

Yet this does not work to get the first anchor of each li. Any ideas?

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

So I guess I was doing it right, but it wasn't working because I had an input text box there which seems to make it not work. Why would it not work anymore once an input box is there?

推荐答案

：first / last-child选择器（和实际上所有孩子选择器都考虑了所有孩子，甚至那些没有使用你想要过滤的标签的孩子。

The ":first/last-child" selector (and actually all 'child' selectors) take into account all the children, even those that aren't using the tag you're trying to filter.

所以 $（'＃tags a：last-child'）有效，因为在这种情况下，锚是最后一个孩子。

So $('#tags a:last-child') works because in this case the anchor is the last child.

然而， $（'＃tags a：first-child'）不起作用，因为输入是第一个孩子。

However, $('#tags a:first-child') doesn't work because input is the first child.

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

You can either use $('#tags a:not(:last-child)'), but this will get all anchor tags that are not last child, so if you have three it will select the first two, and if you have another element after the last anchor it will select all the anchors.

或你可以使用 $（'＃tags a：nth-​​child（2）'），但当然这里依赖于第一个锚是第二个孩子的事实，所以，如果你删除输入元素ents，或者在第一个锚之前添加更多元素然后它将无法工作。

Or you can use $('#tags a:nth-child(2)'), but of course here it relies on the fact that the first anchor is a 2nd child, so if you remove the input elements, or add more elements in front of the first anchor then it won't work.

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

(You can think of the child selectors as having higher priority than the tag selectors. So, it first filters out the children, regardless of tag, or class, and then it looks at what tag you want. Which is counter intuitive and odd, I know :) )

这篇关于jQuery选择器，用于查找每组元素中的第一个子元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！