jquery的lt选择器里的一些坑

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

先看:lt()选择器的官方定义：

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


举个例子，有这么一段html

代码一：

$("div:lt(2)").css("background","#f00");

结果一：

$(&＃8220;div&＃8221;)选定的是两个div元素，索引值分别是0，1。div:lt(2)返回索引值小于2的元素，即两个div都被选中。

再来看一段代码：

代码二：

$("div ul li:lt(2)").css("background","#f00");

你们第一反应是不是也会觉得是下面这种效果呢。

我一开始也觉得是这种，但是其实并不是。
可以直接console.log一下到底选择了哪些东西。

也就是说，$(&＃8220;div li:lt(2)&＃8221;)其实只是选择了所有的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)的元素。


我们可以这么理解它，如果一个选择是这样,$(&＃8220;selector :lt(n)&＃8221;)，我们只需知道$(&＃8220;selector&＃8221;)选择了哪些东西，然后在这全部返回的元素里面选择前n-1个就行了。