check if data attribute (array) contains value

Question

is it possible to check if a data attribute (array) contains a specific value?

element looks like this:

<span id="el" data-id="[1, 2, 10, 3]"></span>
<span id="el" data-id="[4, 3]"></span>
<span id="el" data-id="[6]"></span>

I tried but (obviously) it didn't work:

$('#abcdef').find('[data-id*="3"]');

This is essentially JSON, so parse as JSON and use .includes. Your second code snippet looks more like you wanted to select an HTML element that contains a number in its data attribute array, rather than check if a given data attribute array contains a value. Which one is it? — Sebastian Simon
– Sebastian Simon, Commented Feb 26, 2021 at 16:03
Does this answer your question? store and retrieve javascript arrays into and from HTML5 data attributes — Heretic Monkey
– Heretic Monkey, Commented Feb 26, 2021 at 16:05
actually your code does work! it will find the first and 2nd span. What did you expect to happen if you say id does not work? (side note: IDs should always be unique!) — caramba
– caramba, Commented Feb 26, 2021 at 16:05
Are those just 3 examples of what a single span might hold or is it 3 span elements that are in your document? The id attribute must be unique on any given element. — Scott Marcus
– Scott Marcus, Commented Feb 26, 2021 at 16:05
Hi @Mad! Could you share the full HTML structure (with the #abcdef element)? Also, what do you want to do with it? Do you want to select the element that matches the data id you're looking for or do you need to find the parent? Like what's your goal? — Scircia
– Scircia, Commented Feb 26, 2021 at 16:07

dev-cyprium · Accepted Answer · 2021-02-26 16:09:01Z

One of the problems in your example is that multiple elements have the same id Unfortunately, this is not possible with HTML and I suggest you make them classes first.

As for your question, it's possible but you would have to do it like so:

$(function () {
  $(".element").each(function () {
     const arr = $(this).data('array');
     let text = 'Does not include 2';
 
     
     if (arr.includes(2)) {
         text = 'Does include 2';       
     }
     
     $(this).text(text);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="element" data-array="[1,2,3,4]"></div>
<div class="element" data-array="[5,6,7]"></div>
<div class="element" data-array="[2,3]"></div>

If you don't want to find by class, you can also search by the data attribute, and then use the same code from above to check for presence of a value in the array:

$("[data-array]").each(...)

Rory McCrossan · Accepted Answer · 2021-02-26 16:35:11Z

0

As you're trying to use the 3 as part of the selector to retrieve elements, you can use filter(), like this:

let id = 3;
$('.el').filter((i, el) => $(el).data('id').includes(id)).addClass('foo');

span { 
  display: block; 
  margin: 3px;
}
.foo { 
  background-color: #C00;
  color: #EEE; 
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<span class="el" data-id="[1, 2, 10, 3]">1, 2, 10, 3</span>
<span class="el" data-id="[4, 3]">4, 3</span>
<span class="el" data-id="[6]">6</span>

Note that I removed the repeated id="el" as it's invalid and changed it to a class.

answered Feb 26, 2021 at 16:35

Rory McCrossan

338k41 gold badges322 silver badges353 bronze badges

Collectives™ on Stack Overflow

check if data attribute (array) contains value

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