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 — Paul
– Paul, Commented Sep 8, 2011 at 7:18

JJJ · Accepted Answer · 2014-06-10 13:52:57Z

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, 2014 at 13:52

JJJ

33.2k20 gold badges95 silver badges103 bronze badges

answered Sep 8, 2011 at 7:14

Billy Moon

58.9k27 gold badges148 silver badges244 bronze badges

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

4 Comments

Billy Moon Over a year ago

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

murze Over a year ago

thanks for solution but it doesn't solve the problem in example 2 (i've added another example to the question)

drzaus Over a year ago

thank you @BillyMoon for the filter, it's what one of the answer's comments here alluded to

grmdgs Over a year ago

It's worth noting that every li on the page needs to have the attribute data-city or this will throw an error.

Haim Evgi · Accepted Answer · 2011-09-08 07:19:58Z

2

try something like :

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

Attribute Contains Selector ^[docs]

jsfiddle example

edited Sep 8, 2011 at 7:19

answered Sep 8, 2011 at 7:13

Haim Evgi

126k46 gold badges222 silver badges226 bronze badges

1 Comment

murze Over a year ago

thanks for solution but it doesn't solve the problem in example 2 (i've added another example to the question)

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related