Question 35935 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

jQuery selector for data attribute array

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?

Tags:

2

Answers


  1. 0

    The &quot; 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>
    Login or Signup to reply.
  2. 0

    Problem is that you’re using the HTML Entity &quot; 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 [&quot;wcpa-select-1658734650073&quot;] 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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search