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, Feb 26 '21 at 16:03
Does this answer your question? [store and retrieve javascript arrays into and from HTML5 data attributes](https://stackoverflow.com/questions/16223786/store-and-retrieve-javascript-arrays-into-and-from-html5-data-attributes) — Heretic Monkey, Feb 26 '21 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, Feb 26 '21 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, Feb 26 '21 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, Feb 26 '21 at 16:07

score 1 · Answer 1 · answered Feb 26 '21 at 16:09

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

score 0 · Answer 2 · answered Feb 26 '21 at 16:35

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.

check if data attribute (array) contains value

2 Answers2