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