资讯专栏INFORMATION COLUMN

jquery的lt选择器里的一些坑

gougoujiang / 1409人阅读

摘要:提供的一些选择器比提供的选择器功能更强大也更灵活,当然也有一些坑,比如选择器。先看选择器的官方定义在选定的所有元素冒号前面选定的元素里,匹配索引值小于给定索引值的元素。举个例子,有这么一段代码一结果一选定的是两个元素,索引值分别是,。

jquery提供的一些选择器比css提供的选择器功能更强大,也更灵活,当然也有一些坑,比如:lt()选择器。

先看:lt()选择器的官方定义:
:lt(index):
Description: Select all elements at an index less than index within the matched set.
在选定的所有元素(冒号前面选定的元素)里,匹配索引值小于给定索引值(index)的元素。

举个例子,有这么一段html

    
  • item1
  • item2
  • item3
  • item4
  • item5
  • item6
  • item7
  • item8

代码一:

$("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个就行了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/112255.html

相关文章

  • jquerylt选择器里一些

    摘要:提供的一些选择器比提供的选择器功能更强大也更灵活,当然也有一些坑,比如选择器。先看选择器的官方定义在选定的所有元素冒号前面选定的元素里,匹配索引值小于给定索引值的元素。举个例子,有这么一段代码一结果一选定的是两个元素,索引值分别是,。 jquery提供的一些选择器比css提供的选择器功能更强大,也更灵活,当然也有一些坑,比如:lt()选择器。 先看:lt()选择器的官方定义: :lt(...

    Songlcy 评论0 收藏0
  • </2016><2017>

    摘要:不觉间,已悄然离去恍然后,正慢慢袭来。已完成一期内容,只包含买家点餐功能,二期准备做卖家及支付功能。经过考虑和评估,我决定对这两个选择进行一个折中。项目部署,及代理转发等配置。发现最近,已经对非技术类书籍少了很多兴趣。 不觉间,2016已悄然离去;恍然后,2017正慢慢袭来。 又到了总结过去,展望未来的时候了,那就先总结16年的收获和经验教训,再展望17年对自己及行业的一些期望吧。 1...

    wangshijun 评论0 收藏0
  • </2016><2017>

    摘要:不觉间,已悄然离去恍然后,正慢慢袭来。已完成一期内容,只包含买家点餐功能,二期准备做卖家及支付功能。经过考虑和评估,我决定对这两个选择进行一个折中。项目部署,及代理转发等配置。发现最近,已经对非技术类书籍少了很多兴趣。 不觉间,2016已悄然离去;恍然后,2017正慢慢袭来。 又到了总结过去,展望未来的时候了,那就先总结16年的收获和经验教训,再展望17年对自己及行业的一些期望吧。 1...

    fxp 评论0 收藏0
  • sap.ui.require in SAP UI5 and require in nodejs

    摘要:例如我需要在的里通过弹一个消息显示在上,我需要先定义我自己的,该自标准的,路径为而为了调用的方法,也必须先拿到的实例。所有的由中的统一管理。 UI5 例如我需要在controller的onShowHello里通过MessageToast弹一个消息显示在UI上,showImg(https://segmentfault.com/img/remote/1460000014235957); 我...

    frank_fun 评论0 收藏0

发表评论

0条评论

gougoujiang

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<