a：nth-​​of-type（1）未按预期工作

Question

我有以下伪HTML布局：

<div id="test">
    <ul>
        <li><span><a ...>...</a></span></li>
        <li><span><a ...>...</a></span></li>
        ... <!-- 105 <a> tags in total -->
    </ul>
</div>

执行以下JQuery选择器：

test = $('#test');
firstItem = test.find('a:nth-of-type(1)');

将firstItem设置为所有105个a元素的数组。为什么？我的选择器出了什么问题？这是最新的Chrome（使用36.x）的问题吗？

预期行为：我只想选择第一个a元素。

Answer 1

您必须致电#test ul的孩子。它不是a，而是li

test = $('#test ul');
firstItem = test.find('li:nth-of-type(1) span a');

Answer 2

<强> jsFiddle Demo

我认为你误解了nth-of-type^{jQuery API}

  

选择所有父元素的第n个子元素

换句话说，它匹配每个span元素的第一个锚子元素，因此，你得到一个非常大的集合。

更好的方法是使用：first selector

test = $('#test');
firstItem = test.find('a:first');

Answer 3

来自文档

  

选择其父级的第n个子元素的所有元素   与具有相同元素名称的兄弟姐妹的关系

每个<a>代码的父级为<span>且只有一个<a>兄弟

尝试

test.find('a').first();

Answer 4

它工作正常：

http://jsfiddle.net/x3ztR/

test = $('#test');
firstItem = test.find('a:nth-of-type(5)').html("ss");

它对我来说很好，使用firebug调试它或在firefox中按Ctrl + Shift + J并查看错误（如果存在）