jquery的lt选择器的一些坑
时间:2023-04-02 20:50:38
HTML
jquery提供的一些选择器比css提供的选择器更强大更灵活。当然也有一些坑,比如:lt()选择器。先看官方对lt()选择器的定义::lt(index):描述:选择匹配集合中index小于index的所有元素。在所有选中的元素中(冒号前选中的元素),匹配索引值小于给定索引值(index)的元素。比如有这么一段html
item1item2item3item4 item5item6item7item8 代码1:$("div:lt(2)").css("background","#f00");结果一:$("div")选择了两个索引值分别为0和1的div元素。div:lt(2)返回索引值小于2的元素,即两个div都被选中。我们再看一段代码:代码2:$("divulli:lt(2)").css("background","#f00");你第一反应是不是觉得是下面这个效果?起初我以为是这样,但事实并非如此。您可以直接console.log您选择的内容。也就是说,$("divli:lt(2)")实际上只选取所有li元素的前两个,而不会选取每个ul元素下的前两个li元素。要实现这种类型的选择效果,解决方法可以是:$("divulli:nth-child(-n+2)").css("background","#f00");现在回到:lt()的定义来自::lt(index):描述:选择匹配集中索引小于索引的所有元素。给定索引值(index)处的元素。我们可以这样理解,如果一个选择是这样的,$("selector:lt(n)"),我们只需要知道$("selector")选择了什么,然后选择所有的第n个返回的元素-1就可以了。