АКЦИЯ: бесплатные месячные курсы по созданию сайтов
на выбор: верстка, JavaScript, PHP или фреймворки. Сегодня последний день для записи! Жми!
76 of 119 menu

Селектор has

Селектор :has выбирает элементы, которые содержат хотя бы один элемент по заданному селектору, необязательно непосредственного потомка. Так как :has не относится к CSS спецификации, то для улучшения производительности в современных браузерах лучше вместо него использовать $("ваш css-селектор").has(селектор/DOM элемент).

Синтаксис

Так мы выбираем элементы:

$(':has(селектор)');

Так мы выбираем элементы, если нужна непосредственная вложенность селектора:

$(':has(>селектор)');

Пример

Давайте выберем только те абзацы, у которых внутри есть тег b и поставим им в конец текст '!!!':

<p>text</p> <p>text</p> <p><b>bold</b> text</p> <p><b>bold</b> text</p> $('p:has(b)').append('!!!');

HTML код станет выглядеть так:

<p>text</p> <p>text</p> <p><b>bold</b> text!!!</p> <p><b>bold</b> text!!!</p>

Смотрите также

  • метод has,
    который фильтрует набор выбранных элементов по потомкам
  • метод filter,
    который фильтрует элементы в наборе по заданному селектору