Наборы элементов в jQuery часть 1 (filter, not, has)

В статье рассмотрены методы из библиотеки jQuery для работы с наборами элементов. К примеру, фильтрация и проверка на соответствие определённому селектору. Методы нечасто используются в реальных проектах, но стоит знать об их существовании.

Фильтр (filter)

Если уже существует набор (выборка) и необходимо сделать дополнительную выборку из неё, то поможет метод filter. Он оставит в выборке только те элементы, которые соответствуют селектору, переданному этому методу в качестве параметра.Посмотрим на примере:
<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div id="cat">Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').filter('#cat').html('Сыр');
</script>
В результате выполнения такого кода будут изменен только тот контейнер <div>, который имеет id="cat". Результат будет такой:
<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div id="cat">Сыр</div>
<div>а котята кувырком.</div>

Фильтр-отрицание (not)

Если необходимо исключить из набора (выборки) какие-то элементы, которые удовлетворяют известным параметрам, то можно воспользоваться методом not. Это метод-антоним для filter. В параметры этого метода передаётся селектор, который отфильтрует выборку и оставит только те элементы, которые не будут соответствовать селектору. Посмотрим на примере:
<div>Тише, мыши, кот на крыше</div>
<div>а котята ещё выше.</div>
<div id="cat">Кот пошёл за молоком,</div>
<div>а котята кувырком.</div>
<script>
   $('div').not('#cat').html('Сыр');
</script>
В результате выполнения такого кода будут изменены не все контейнеры <div>, а только те, которые не имеют id="cat". Результат будет такой:
<div>Сыр</div>
<div>Сыр</div>
<div id="cat">Кот пошёл за молоком,</div>
<div>Сыр</div>

Фильтр по наличию потомков (has)

Метод has действует как своеобразный фильтр, который оставляет те элементы, у которых есть потомки, которые удовлетворяют селектору. Приведём пример, изменим содержание только тех <div> контейнеров, в которох есть потомок <b>:
<div>Тише, мыши, кот на крыше</div>
<div>а <b>котята</b> ещё выше.</div>
<script>
   $('div').has('b').html('Сыр');
</script>
В результате выполнения такого кода будут изменен только тот контейнер <div>, который имеет в себе <div>. Результат будет такой:
<div>Тише, мыши, кот на крыше</div>
<div>Сыр</div>
Читайте продолжение статьи тут: "Наборы элементов в jQuery часть 2 (eq, slice, clone)"
MouseDC.ru - хостинг, виртуальный хостинг, покупка доменов, проверка доменов, WHOIS, курсы создания сайтов, вебинары по созданию, курсы разработки сайтов, доработка сайтов, сопровождение сайтов, разработка сайтов, техподдержка сайтов
Была ли эта статья полезна? Есть вопрос?
Cмотрите другие статьи: