$('ul li:gt(0) span:first').css('color', 'red')..

阿飞i
  • 629
<ul>
    <li><span>1</span><span>2</span></li>
    <li><span>11</span><span>22</span></li>
    <li><span>111</span><span>222</span></li>
</ul>

结构就这样. 我认为匹配的应该是 ‘11’ ‘111’。 但结果是‘11’。 很纳闷不解。

然后换成

$('ul li:gt(0)').each(function(){
    $(this).find('span:first').css('color', 'red');
});

可行。

求解为什么选择器不行.

回复
阅读 3.5k
4 个回答
不写代码的码农
  • 12.7k
✓ 已被采纳

选择器改成这样:$('ul li:gt(0) span:first-child').css('color','red');

$('ul li:gt(0) span')返回的结果集是span,$('ul li:gt(0) span:first')只是选择结果集中的第一个。即$('ul li:gt(0) span:first').length是1,而a b:first-child的含义是每一个a的子元素中,第1个与b匹配的元素,所以$('ul li:gt(0) span:first-child').length是2。

你选择器写的有问题

首先,你的选择器$('ul li:gt(0) span:first')选取到只是<span>11</span>.
把你的选择器拆分来看就很清楚了:
首先$('ul li:gt(0)')这个是选取了ul下第1个li以后的所有li,即

<li><span>11</span><span>22</span></li>
<li><span>111</span><span>222</span></li>

从这里可以看出,里面是包含着4个span的.
所以你后面的span:first只是选取到了第一个span,即

<span>11</span>

see?

justjavac
  • 47.7k

分开吧:

第一步:大于 0li

$('ul li:gt(0)')

结果:

<li><span>11</span><span>22</span></li>
<li><span>111</span><span>222</span></li>

第二步:大于 0li,在结果中匹配 span

$('ul li:gt(0) span')

结果:

<span>11</span><span>22</span><span>111</span><span>222</span>

第三步:大于 0li,在结果中匹配 span,在结果中匹配第 1 个

$('ul li:gt(0) span:first')

结果:

<span>11</span>

好像没有什么不对啊?

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏