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