How to select elements with jQuery that have a certain value in a data attribute array

Question

is there a way in jQuery to select elements that have a certain value in a data attribute array?

Consider this snippet of html:

<li id="person1" data-city="Boston, New York, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, New York, Washington">
    Person name 2
</li>

What is the best way in jQuery to select all persons with "New York" in the data-city attribute?

The solution should take in account that certain citynames appear in other city names (in example 2: London, New London)

Example 2:

<li id="person1" data-city="Boston, London, San Fransisco">
    Person name 1
</li>
<li id="person2" data-city="Los Angeles, Washington, New London">
    Person name 2
</li>

What is the best way in jQuery to select all persons with "London" in the data-city attribute? A city with "New London" should not be selected.

possible duplicate of [How to select elements with jQuery that have a certain value in a data attribute array](http://stackoverflow.com/questions/7344353/how-to-select-elements-with-jquery-that-have-a-certain-value-in-a-data-attribute) — Paul, Sep 08 '11 at 07:18

score 36 · Accepted Answer · edited Jun 10 '14 at 13:52

36

You can use the selector tag[attr*=string] where *= matches the string found anywhere in the tag value. I have colored the text red, just so you can test...

$("li[data-city*=New York]").css({color:'red'});

Or via more complex method to fit needs of example two:

$("li")
    .filter( function(){ 
            return $(this).attr('data-city').match(/(^|,\s+)London(,|$)/) 
        })
    .css({color:'red'});

This method uses filter to go through the list of selected li and match all elements with attribute data-city that matches regex (^|,\s+)London(,|$) which means...

start or comma (^|,)
and one or more spaces (\s+)
followed by London
followed by comma or end (,|$)

I used this HTML:

<li id="person1" data-city="Boston, New York, San Fransisco, London">
    Person name 1
</li>
<li id="person2" data-city="Boston, New Jersey, London, San Fransisco">
    Person name 2
</li>
<li id="person3" data-city="Los Angeles, New York, New London, Washington">
    Person name 3
</li>

edited Jun 10 '14 at 13:52

JJJ

32,902
20
89
102

answered Sep 08 '11 at 07:14

Billy Moon

57,113
24
136
237

p.s. you should always use unique id field, if you want a type of thing rather than a specific thing, you should use class instead – Billy Moon Sep 08 '11 at 07:15
thanks for solution but it doesn't solve the problem in example 2 (i've added another example to the question) – murze Sep 08 '11 at 07:37
thank you @BillyMoon for the filter, it's what one of the [answer's comments here](http://stackoverflow.com/a/4191718/1037948) alluded to – drzaus Jul 26 '12 at 16:08
It's worth noting that every `li` on the page needs to have the attribute data-city or this will throw an error. – grmdgs Sep 27 '16 at 22:26

Haim Evgi · Answer 2 · 2011-09-08T07:19:58.043

2

try something like :

$('li[data-city*="New York"]')

Attribute Contains Selector ^[docs]

jsfiddle example

edited Sep 08 '11 at 07:19

answered Sep 08 '11 at 07:13

Haim Evgi

123,187
45
217
223

thanks for solution but it doesn't solve the problem in example 2 (i've added another example to the question) – murze Sep 08 '11 at 07:38

How to select elements with jQuery that have a certain value in a data attribute array

2 Answers2

Linked