当前位置 : 主页 > 网页制作 > JQuery >

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

来源:互联网 收集:自由互联 发布时间:2021-06-15
我有这个 HTML: div id="tags" ul liinput type="text" /a href="#"First Link/a a href="#"Second Link/a/li liinput type="text" /a href="#"First Link/a a href="#"Second Link/a/li liinput type="text" /a href="#"First Link/a a href="#"Second
我有这个 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')

然而,这并不适用于获得每个李的第一个锚点.有任何想法吗?

编辑:
所以我想我做得对,但它没有用,因为我有一个输入文本框,似乎使它无法正常工作.一旦输入框存在,为什么它不再起作用?

“:first / last-child”选择器(实际上所有“子”选择器)都会考虑所有孩子,即使是那些没有使用您尝试过滤的标签的孩子.

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

但是,$(‘#tags a:first-child’)不起作用,因为输入是第一个孩子.

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

或者您可以使用$(‘#tags a:nth-​​child(2)’),但当然这里依赖于第一个锚点是第二个子节点,因此如果删除输入元素或添加更多元素在第一个锚点前,它将无法正常工作.

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

网友评论