Наборы элементов в 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)"