html - 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.

Answer 1

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>