3

I have an element which I'd like to give a data attribute which contains a series of values, i.e., an Array. Then I'd like to be able to select it based on any of the values in that series. Something like this:

<div id="example" data-my-series='["foo", "bar"]'></div>

Then I was hoping to select it based on the fact that it has "foo" in it. I'm not really sure how I'd go about it, though. I know I'd do $('div[data-my-series="foo"]') if I wasn't taking this approach, but, obviously that's not the case. Any suggestions?

Edit: Also, how can I achieve the inverse of this? i.e., select an element which does not have "foo" in its data-my-series?

Improve this question

3 Answers 3

Reset to default
3 
$( "[data-my-series*='foo']" )

Here ya go!

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

1 Comment

This. But also, as a side note, if you use the jQuery .data() method to change these values this method will no longer work to select the elements with updated values.
3

The simplest way is very similar to what you are doing, just use the Attribute Contains Selector instead of the equals selector: $('div[data-my-series*="foo"]')

You can see more about it here: http://api.jquery.com/attribute-contains-selector/

Edit:

To answer the comment below, you can layer selectors in jQuery so take a look at the ":not()" selector. The usage would be $('div:not([data-my-series*="foo"])'). Make sure you don't put the div inside the :not. Also you will probably want to add [data-my-series] outside the :not as well to make sure you only select divs that have that data attribute.

Final product: $('div[data-my-series]:not([data-my-series*="foo"])')

Improve this answer

3 Comments

Awesome! Thanks for the link too. How can I do the inverse now? That is, select things which don't have foo in them. I didn't see something like that on the jQuery site you linked.
I added the answer to this question to my original answer.
Watch out. This example will do simple string matching and probably result in matches you didn't intend. $('[data-my-series*="foo"]') will not just find <div data-my-series="foo"> but will also include <div data-my-series="foobar"> in the results
2

Watch out. The accepted answer will do substring matching and probably result in matches you didn't intend.

$('[data-my-series*="foo"]') will not just find <div data-my-series="foo"> but will also include <div data-my-series="foobar"> in the results

You should use ~ instead of * to do whole-word matching $('[data-my-series~="foo"]'). This will result in matching foo but not foobar

If you want multiple words in the data string, use spaces to separate them: http://api.jquery.com/attribute-contains-word-selector/

Improve this answer

3 Comments

If you can provide an example showing why this is correct I'll accept your answer instead.
Consider the following: <div data-my-series="women"></div> <div data-my-series="men"></div> Using $('[data-my-series*="men"]') will end up matching both div.men and div.women instead of just div.men.
Thanks, makes sense if you use space delimiting.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.