Наборы элементов в jQuery часть 2 (eq, slice, clone)

В предыдущей статье были рассмотрены методы "filter", "not", "has" из библиотеки jQuery для работы с наборами элементов. В этой статье продолжим обсуждение методов для работы с наборами.

Выбор по порядковому номеру (eq)

Метод eq - это фильтр, который делает выбор элемента по порядковому номеру в наборе. Нумерация начинается с нуля. То есть он берёт набор и оставляет в нём только тот элемент, чей порядковый номер соответствует его параметру. Продемонстрируем это, изменив третью строчку из предыдущего примера:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').eq(2).html('Сыр');
</script>

Так как третья строчка соответствует числу 2 (нумерация в параметре к eq начинается с нуля), то будет изменена третья строчка:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Сыр</div>
<div>а котята кувырком.</div>

Выбор части из набора (slice)

Если в метод eq можно передать только порядковый номер элемента, который нужно оставить, то в метод slice передаётся два параметра: начальный и конечный порядковый номер, который надо оставить. То есть если написать slise(1,3), то следующие методы будут применяться только к 2, 3 и 4 по счёту элементу включительно. Продемонстрируем это:

<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div>Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<div>Кот пришёл без молока,</div>
<div>а котята ха-ха-ха.</div>
<script>
   $('div').slise(1,3).html('Сыр');
</script>

Результат будет таким:

<div>Тише, мыши, кот на крыше</div>
<div>Сыр</div>
<div>Сыр</div>
<div>Сыр</div>
<div>Кот пришёл без молока,</div>
<div>а котята ха-ха-ха.</div>

Клонирование набора (clone)

Метод clone делает полную копию набора. Обратите вниание, что это метод не создаёт HTML код - его придётся вставлять отдельно. Предположим, что нам необходимо продублировать набор и вставить дубликат после определнного элемента. Тогда код будет таким:

<div>Тише, мыши, кот на крыше</div>
<div id="cat">а котята ещё выше.</div>
<script>
   $('div').clone().insertAfter('#cat');
</script>

Результат будет таким:

<div>Тише, мыши, кот на крыше</div>
<div id="cat">а котята ещё выше.</div>
<div>Тише, мыши, кот на крыше</div>
<div id="cat">а котята ещё выше.</div>