:lt(n)1.0
Фильтрует набор выбранных элементов, оставляя только те, индекс которых меньше n. Не забывайте, что индексирование начинается с 0.
Начиная с jQuery-1.8 индекс внутри селектора :lt(n) может быть задан отрицательным числом. В этом случае он будет рассматриваться как порядковый номер с конца: -1 — последний элемент, -2 — предпоследний и т. д.
Примеры использования:
$('.lBox:lt(3)')
| вернет первые три элемента (с индексами 0, 1, 2) с классом lBox.
|
$('.lBox:lt(-3)')
| вернет все элементы с классом lBox, кроме последних трех.
|
Селектор :lt(n) является надстройкой библиотеки jQuery, а не частью официальной css спецификации (как большинство других селекторов). Поэтому, при поиске, jQuery не сможет использовать быструю нативную функцию querySelectorAll(). Для наилучшей производительности подойдет следующий вариант:
// не самый быстрый вариант
$( '.some-hint:lt( 5 )' );
// эффективнее будет
$( '.some-hint' ).slice( 0, 5 );
В действии
Выделим планеты, идущие до земли (идущей под индексом 2): установим зеленый цвет фона всем элементам, с индексом, меньше 2
~lt~!DOCTYPE html~gt~
~lt~html~gt~
~lt~head~gt~
~lt~script src="https://code.jquery.com/jquery-latest.js"~gt~~lt~/script~gt~
~lt~style~gt~
#list{
width:260px;
}
.item{
width: 250px;
height: 20px;
float: left;
margin: 1px;
padding: 3px;
background-color: #EEEEEE;
list-style-type:none;
}
~lt~/style~gt~
~lt~/head~gt~
~lt~body~gt~
~lt~ul id="list"~gt~
~lt~li class="item"~gt~0. Меркурий ~lt~/li ~gt~
~lt~li class="item"~gt~1. Венера ~lt~/li ~gt~
~lt~li class="item"~gt~2. Земля ~lt~/li ~gt~
~lt~li class="item"~gt~3. Марс ~lt~/li ~gt~
~lt~li class="item"~gt~4. Юпитер ~lt~/li ~gt~
~lt~li class="item"~gt~5. Сатурн ~lt~/li ~gt~
~lt~li class="item"~gt~7. Уран ~lt~/li ~gt~
~lt~li class="item"~gt~8. Нептун ~lt~/li ~gt~
~lt~li class="item"~gt~9. Плутон ~lt~/li ~gt~
~lt~/ul~gt~
~lt~script~gt~
$('#list .item:lt(2)')
.css('background-color', '#cceecc');
~lt~/script~gt~
~lt~/body~gt~
~lt~/html~gt~
Ссылки