jQuery - first, last, slice (методы)

Статья, в которой рассматриваются методы библиотеки jQuery .first(), .last(), .slice().

Метод .first() предназначен для выбора первого элемента из текущей выборки. Данный метод не имеет параметров. В качестве результата метод .first() возвращает новый объект jQuery, состоящий из выбранного элемента. Действия метода .first() аналогичны действиям метода .eq со значением параметра 0 (.eq(0)).

jQuery - Метод first()

Например, рассмотрим, как выбрать из текущей выборки, содержащей элементы span, первый элемент:

<p>
  <span>Некоторый текст.</span>
  <span>Ещё некоторый текст.</span>
  <span>Совсем другой текст.</span>
</p>
<script>
  $("p span").first();
  // --> объект jQuery, содержащий в своём наборе только элемент <span>Некоторый текст.</span>.
</script>

Метод .last() предназначен для выбора последнего элемента из текущей выборки. Данный метод не имеет параметров. В качестве результата метод .last() возвращает новый объект jQuery, состоящий из выбранного элемента. Действия метода .last() аналогичны действиям метода .eq() со значением параметра -1 (.eq(-1)).

jQuery - Метод last()

Например, рассмотрим, как выбрать из текущей выборки, содержащей элементы span, последний элемент:

<p>
  <span>Некоторый текст.</span>
  <span>Ещё некоторый текст.</span>
  <span>Совсем другой текст.</span>
</p>
<script>
  $("p span").last();
  // --> объект jQuery, содержащий в своём наборе только элемент <span>Совсем другой текст.</span>.
</script>

Метод .slice(startIndex[,endIndex]) предназначен для выбора из текущего набора только тех элементов, которые имеют индексы в пределах указанного диапазона.

Данный метод имеет несколько вариантов использования:

  1. .slice(startIndex) - без указания конечного индекса (endIndex). Этот вариант метода предназначен для выбора из текущей выборки всех элементов, индекс которых больше или равен startIndex. В большинстве случаев параметр startIndex- это положительное число, большее или равное 0. Кроме этого в качестве параметра startIndex можно также использовать отрицательное число. В этом случае отсчёт элемента, с которого необходимо начинать выбирать элементы выполняется с конца выборки.

  2. .slice(startIndex,endIndex) - с указанием конечного индекса (endIndex). Этот вариант метода предназначен для выбора из текущей выборки всех элементов, индекс которых больше или равен startIndex и меньшеendIndex. Параметр endIndex (необязательный) — число, указывающее позицию (индекс) элемента, до которого необходимо выбирать элементы из текущей выборки. Если в качестве параметра endIndex задано отрицательное число, то отсчёт элемента, до которого необходимо выбрать элементы, осуществляется с конца текущей выборки.

В качестве результата метод .slice() возвращает новый объект jQuery, состоящий из выбранных элементов.

jQuery - Метод slice()

Рассмотрим работу с методом .slice() на примера списка:

<ul>
  <li id="one">Пункт 1</li>
  <li id="two">Пункт 2</li>
  <li id="three">Пункт 3</li>
  <li id="four">Пункт 4</li>
  <li id="five">Пункт 5</li>
</ul>

<script>
  $("li");
  // --> Объект jQuery, содержащий набор из 5 элементов li.
</script>
  1. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен 2.

    $("li").slice(2);
    // --> Объект jQuery, содержащий набор из 3 элементов li: <li id="three">Пункт 3</li> (индекс 2), <li id="four">Пункт 4</li> (индекс 3), <li id="five">Пункт 5</li> (индекс 4).
    
  2. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен -3.

    $("li").slice(-3);
    // --> Объект jQuery, содержащий набор из 3 элементов li: <li id="three">Пункт 3</li> (индекс -3), <li id="four">Пункт 4</li> (индекс -2), <li id="five">Пункт 5</li> (индекс -1).
    
  3. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен 2 и меньше 4.

    $("li").slice(2,4);
    // --> Объект jQuery, содержащий набор из 2 элементов li: <li id="three">Пункт 3</li> (индекс 2), <li id="four">Пункт 4</li> (индекс 3).
    
  4. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен -3 и меньше 4.

    $("li").slice(-3,4);
    // --> Объект jQuery, содержащий набор из 2 элементов li: <li id="three">Пункт 3</li> (индекс -3), <li id="four">Пункт 4</li> (индекс 3).
    
  5. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен -2 и меньше -1.

    $("li").slice(-2,-1);
    // --> Объект jQuery, содержащий набор из 1 элемента li: <li id="four">Пункт 4</li> (индекс -2).
    


   JavaScript и jQuery 0    1029 0

Комментарии (2)

  1. oleg # 0
    «2. Выберем из первоначальной выборки (набор из 5 элементов li) все элементы, индекс которых больше или равен -3.»

    Ошибка:
    $(«li»).slice(2) => $(«li»).slice(-3)
    1. Александр Мальцев # 0
      Спасибо, поправил.

    Вы должны авторизоваться, чтобы оставлять комментарии.