摘要:jQuery提供的一些选择器比css提供的选择器功能更强大,也更灵活,当然也有一些坑,比如:lt()选择器。希望阅读本篇文章以后大家有所收获,帮助大家对jQuery的理解更加深入。
jquery提供的一些选择器比css提供的选择器功能更强大,也更灵活,当然也有一些坑,比如:lt()选择器。
先看:lt()选择器的官方定义:
:lt(index):
Description: Select all elements at an index less than index within the matched set.
在选定的所有元素(冒号前面选定的元素)里,匹配索引值小于给定索引值(index)的元素。
举个例子,有这么一段html
<div class="div1">
<ul class="u1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
</ul>
</div>
<div class="div2">
<ul class="u2">
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item8</li>
</ul>
</div>
代码一:
$("div:lt(2)").css("background","#f00");
结果一:
$("div")选定的是两个div元素,索引值分别是0,1。div:lt(2)返回索引值小于2的元素,即两个div都被选中。
再来看一段代码:
代码二:
$("div ul li:lt(2)").css("background","#f00");
你们第一反应是不是也会觉得是下面这种效果呢。
但是其实并不是。
可以直接console.log一下到底选择了哪些东西。
也就是说,$("div li:lt(2)")其实只是选择了所有的li元素的头两个而已,而并没有分别选择每个ul元素下的头两个li元素。
要实现这种类型的选择效果,一种解决办法可以是:
$("div ul li:nth-child(-n + 2)").css("background","#f00");
现在回到:lt()的定义上来:
:lt(index):
Description: Select all elements at an index less than index within the matched set.
在选定的所有元素(冒号前面选定的元素)里,匹配索引值小于给定索引值(index)的元素。
我们可以这么理解它,如果一个选择是这样,$("selector :lt(n)"),我们只需知道$("selector")选择了哪些东西,然后在这全部返回的元素里面选择前n-1个就行了。
本文由职坐标整理发布,欢迎关注职坐标WEB前端jQuery频道,获取更多jQuery知识!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号