Селектор jQuery для массива атрибутов данных

Вот этот html-код:

<div class = "wcpa_form_outer" data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]">

Для которого я пытаюсь добавить к нему html. Я пробовал разные подходы, но ни один из них не работал.

jQuery('.wcpa_form_outer[data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]"]').append('some html here');

Или

jQuery('.wcpa_form_outer[data-attrrelated = "[wcpa-select-1658734650073]"]').append('some html here');

Или

jQuery('.wcpa_form_outer').data('attrrelated').append('some html here');

Любые подсказки?

Первое утверждение в вашем вопросе работает...

KooiInc 18.11.2022 19:38

Meni 18.11.2022 19:41
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
Как использовать API парсинга квитанций с помощью JavaScript за 5 минут?
В этом руководстве вы узнаете, как использовать API парсинга квитанций за 5 минут с помощью JavaScript. Eden AI предоставляет простой и удобный для...
Хук useOnClickOutside в ReactJS
Хук useOnClickOutside в ReactJS
Как разработчик ReactJS, вы, возможно, сталкивались с ситуацией, когда вам нужно закрыть модальное или выпадающее меню, когда кто-то щелкает за его...
Хуки (часть-2) - useEffect
Хуки (часть-2) - useEffect
Хук useEffect - один из самых мощных и универсальных инструментов в арсенале разработчика React. Он позволяет вам управлять побочными эффектами в...
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
Простое руководство по тестированию взаимодействия с пользователем с помощью библиотеки тестирования React
В предыдущем посте я показал вам на примерах, как писать базовые тесты в React. Важнейшей частью пользовательского интерфейса приложений является...
Как конвертировать HTML в PDF с помощью jsPDF
Как конвертировать HTML в PDF с помощью jsPDF
В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.
Создайте титры как в звездных войнах с помощью CSS и Javascript
Создайте титры как в звездных войнах с помощью CSS и Javascript
Если вы веб-разработчик (или хотите им стать), то вы наверняка гик и вам нравятся "Звездные войны". А как бы вы хотели, чтобы фоном для вашего...
1
2
53
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Проблема может заключаться в " и/или [] в значении атрибута. Удалите его или попробуйте использовать часть (наиболее важную часть?) значения атрибута:

$('[data-attrrelated* = "1658734650073"]')
  .append('some html here!');
$('[data-attrrelated* = "wcpa-select-165873465007"')
  .append('<br>some html here too!');
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class = "wcpa_form_outer" data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]"></div>
Ответ принят как подходящий

Проблема в том, что вы используете объект HTML " в своем атрибуте. Это переводится в буквальную цитату. JQuery не выполняет преобразование сущностей, поэтому он буквально ищет строку ["wcpa-select-1658734650073"] с амперсандами и всем остальным, а не ["wcpa-select-1658734650073"], которая является фактическим значением в вашем атрибуте.

Вы можете обойти это, используя один из следующих методов (после перевода Entity в кавычки в вашем коде).

  1. Используйте селектор CSS «содержит» для вашего атрибута ( attr*=value ) (продемонстрировано ответом KooiInc) или
  2. Используйте шаблон строки, который позволит вам встроить оба типа кавычек в вашу строку и получить точное совпадение ( attr=value ), как показано ниже.
  3. Создание строкового значения, содержащего кавычки, с помощью конкатенации строк (например, '["' + value + '"]' )
  4. Используйте функцию decodeEntities из этого ответа, чтобы перевести значение вашего атрибута перед попыткой поиска (не проверено, и ему 10 лет)

jQuery(`.wcpa_form_outer[data-attrrelated='["wcpa-select-1658734650073"]']`).append('foo')
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class = "wcpa_form_outer" data-attrrelated = "[&quot;wcpa-select-1658734650073&quot;]">append here: 
</div>

Другие вопросы по теме