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