以li元素为目标的第二个跨度

Question

我有以下标记：

<li>
<span>Hi</span>
<a href="#">Link</a>
<span>Bye</span>
</li>

如何定位第二个span？我不想访问li的第三个孩子，而是访问li中的第二个孩子。

Answer 1

您可以使用jQuery的eq()选择器获取span元素中的第二个li。

$("li span").eq(1)

eq()将返回一个带有对第二个span的引用的jQuery对象。所以你可以继续调用jQuery方法。

如果你想获得第二个跨度的HTML元素，你可以使用它：

$("li span")[1];

Answer 2

使用带有CSS nth-child的jquery选择器。

$('li span:nth-child(2)')

Answer 3

您可以尝试以下选择器：

$('li').children('span').eq(1);

Answer 4

试一试：添加jquery引用并使用此脚本

<script>
    $("li span:nth-child(2)").append("<span> - 2nd!</span>");
</script>