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

问题

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.

回答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>

回答2:

try something like :

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

Attribute Contains Selector [docs]

jsfiddle example

来源：https://stackoverflow.com/questions/7344361/how-to-select-elements-with-jquery-that-have-a-certain-value-in-a-data-attribute

标签

jquery

html5

custom-data-attribute