Наборы элементов в 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>
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: