jQuery селектор :lt()

Определение и применение

jQuery селектор :lt() (less than, меньше чем) выбирает элементы с порядковыми номерами меньше, чем указанное число.

Чтобы выбрать элементы с порядковыми номерами выше, чем указанное число, необходимо воспользоваться jQuery селектором :gt().

jQuery синтаксис:

JavaScript
$( "selector:lt(index)" ) // значение отсчитывается от первого элемента (индекс начинается с нуля)

$( "selector:lt(-index)" ) // значение отсчитывается от последнего элемента (-1 соответствует последнему элементу)

Добавлен в версии jQuery

1.0 - возможность выбора элементов, отсчитывая от первого элемента.
1.8 - возможность выбора элементов, отсчитывая от последнего элемента (возможность использования отрицательного индекса).

Селектор в CSS

Это селектор jQuery, который не является частью спецификации CSS.

Пример старого кода

Селектор :lt() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html
HTML
<div>
  <p>Первый абзац внутри блока</p>
  <p>Второй абзац внутри блока</p>
  <h2>Заголовок внутри блока</h2>
</div>
<div>
  <p>Первый абзац внутри блока</p>
  <p>Второй абзац внутри блока</p>
  <h2>Заголовок внутри блока</h2>
</div>
main.js
JavaScript
$(document).ready(function () {
    $('p:lt(-2)').css('text-decoration', 'underline') // выбираем все элементы <p> в документе с индексом меньше, чем -2
    $('p:lt(3)').css('color', 'orange') // выбираем все элементы <p> в документе с индексом меньше, чем 3
})
style.css
CSS
body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery селектора :lt() мы выбрали и стилизовали элементы <p>, чей индекс меньше -2 (добавили декорирование текста - нижнее подчеркивание), и чей индекс меньше чем 3 (установили цвет текста оранжевый).