Перейти к содержанию

Селектор атрибутов [attribute~='value']

Селектор атрибутов [attribute~='value'] выбирает каждый элемент с определенным атрибутом, значение которого, содержит определенное слово (слово может быть разделено пробелами).

Синтаксис

$("[attribute~='value']")

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

Пример

<!DOCTYPE html>
<html>
  <head>
    <title>Использование jQuery селектора атрибутов [attribute~='value']</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $("p[title~='подсказка']").css('color', 'red') // выбираем все HTML элементы <p>, которые имеют определенный атрибут, значение которого, содержит определенное слово и устанавливаем цвет текста - красный
      })
    </script>
  </head>
  <body>
    <p title="подсказка">Простой абзац</p>
    <p title="подсказка-1">Простой абзац</p>
    <p title="Подсказка">Простой абзац</p>
    <p title="-подсказка подсказка">Простой абзац</p>
    <p title="-подсказка">Простой абзац</p>
  </body>
</html>

В этом примере с использованием селектора атрибутов [attribute~='value'] мы выбрали все элементы <p> в документе, которые имеют глобальный атрибут title со значением, которое содержит определенное слово, и стилизовали их с использованием CSS свойства color (цвет текста)

Результат:

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

Пример использования jQuery селектора атрибутов [attribute~='value'] (значение содержит определенное слово).