jQuery selector for data attribute array

Question

Theres' this html code:

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

for which i'm trying to append html to it. I have tried various approaches but none have worked.

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

or

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

or

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

any clues?

Answer 1

The " and/or [] in the attribute value may be the problem Remove it, or try using a part (the most relevant part?) of the attribute value:

$('[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>

Answer 2

Problem is that you're using the HTML Entity " in your attribute. This is being translated to a literal quote. JQuery does not do Entity translation, so it's literally looking for the string ["wcpa-select-1658734650073"] with ampersands and all, not ["wcpa-select-1658734650073"] which is the actual value in your attribute.

You can work around this by using one of the following methods (after also translating the Entity into a quote in your code).

1. Use a CSS "contains" selector for your attribute ( attr*=value ) (demonstrated by KooiInc's answer) or
2. Use a string template which will allow you to embed both types of quotes in your string and get an exact match ( attr=value ), shown below
3. Constructing a string value containing quotes by using string concatenation (e.g. '["' + value + '"]' )
4. Use the decodeEntities function from this answer to translate your attribute value before attempting the lookup (untested, and it's 10 years old)

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>