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="[&quot;wcpa-select-1658734650073&quot;]"]').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?

@Kooilnc & @ Tibrogargan there was an error in my part in the html. i have updated the original question with it — Meni
– Meni, Commented Nov 18, 2022 at 18:41

KooiInc · Accepted Answer · 2022-11-18 19:06:36Z

2

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>

edited Nov 18, 2022 at 19:06

answered Nov 18, 2022 at 18:56

KooiInc

124k32 gold badges145 silver badges181 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tibrogargan · Accepted Answer · 2022-11-18 19:27:27Z

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).

Use a CSS "contains" selector for your attribute ( attr*=value ) (demonstrated by KooiInc's answer) or
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
Constructing a string value containing quotes by using string concatenation (e.g. '["' + value + '"]' )
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>

Collectives™ on Stack Overflow

jQuery selector for data attribute array

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related