jQuery метод .has()

Определение и применение

jQuery метод .has() сокращает набор совпавших элементов до тех, у которых есть потомок, соответствующий селектору, или элементу DOM.

jQuery синтаксис:

Синтаксис 1.4:

$( selector ).has( selector )
$( selector ).has( element )

selector - String

element - Element (DOM)

Добавлен в версии jQuery

Значения параметров

Пример использования

Метод .has() — пример 1

Нажмите ▶. Измените JavaScript и запустите пример повторно. Используется jQuery 4.0.0.

index.html

HTML

<p><i>Первый</i> параграф</p>
<p>Второй параграф</p>
<p><i class="test">Третий</i> параграф</p>

main.js

JavaScript

$(document).ready(function () {
    $('p').has('i').css('color', 'red') // сокращаем набор совпавших элементов <p> до тех, у которых есть потомок  <span> и устанавливаем цвет текста
    $('p').has(document.getElementsByClassName('test')[0]).css('background', 'plum') // сокращаем набор совпавших элементов <p> до тех, у которых есть потомок DOM элемент с классом test под индексом ноль и устанавливаем цвет заднего фона
})

style.css

CSS

body {
  margin: 16px;
  font:
    16px/1.5 system-ui,
    sans-serif;
  overflow-wrap: anywhere;
}
img,
input,
select,
textarea,
button {
  max-width: 100%;
}

В этом примере с использованием jQuery метода .has() мы сокращаем набор совпавших элементов <p> до тех, у которых есть потомок элемент <i>, и с помощью метода .css() устанавливаем цвет текста красный. Кроме того, с использованием jQuery метода .has() мы сокращаем набор совпавших элементов <p> до тех, у которых есть потомок DOM элемент с классом test под индексом ноль, и с помощью метода .css() устанавливаем цвет заднего фона предопределенного цвета plum.