jQuery селектор атрибутов (с несколькими значениями)

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

jQuery селектор атрибутов (с несколькими значениями) выбирает элементы, которые удовлетворяют всем указанным фильтрам атрибута.

jQuery синтаксис:

JavaScript

$("[attributeFilter1][attributeFilter2][attributeFilterN]")

// в качестве фильтра может быть использован любой селектор атрибутов

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

1.0

Селектор в CSS

CSS селектор атрибутов (с несколькими значениями).

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

Селектор атрибутов (с несколькими значениями) — пример 1

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

index.html

HTML

<p title="подсказка" id="main">Элемент со значением атрибута title = "подсказка" и id = "main".</p>
<p title="подсказка">Элемент со значением атрибута title = "подсказка".</p>
<p title="подсказка">Элемент со значением атрибута title = "подсказка".</p>
<p title="подсказка">Элемент со значением атрибута title = "подсказка".</p>

main.js

JavaScript

$(document).ready(function () {
    $("[title='подсказка'][id]").css('color', 'red') // выбираем все HTML элементы <p> с атрибутом title со значением 'подсказка' и с атрибутом id, и устанавливаем цвет текста - красный
})

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 селектора атрибутов (с несколькими значениями) мы выбрали все элементы <p> в документе, которые содержат глобальный атрибут title со значением "подсказка" и с глобальным арибутом id, и стилизовали их с использованием CSS свойства color (цвет текста).