如何使用jQuery选择数据属性数组中具有特定值的元素

Question

在 jQuery 中有没有办法在数据属性数组中选择具有特定值的元素？

考虑一下这个 html 的 sn-p：

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

在 jQuery 中选择 data-city 属性中所有具有“纽约”的人的最佳方法是什么？

解决方案应考虑某些城市名​​称出现在其他城市名称中（例如 2：伦敦、新伦敦）

示例 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>

在 jQuery 中选择 data-city 属性中所有具有“London”的人的最佳方法是什么？不应选择带有“新伦敦”的城市。

Answer 1

您可以使用选择器tag[attr*=string]，其中*= 匹配标记值中任意位置的字符串。我已将文本着色为红色，以便您可以测试...

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

或者通过更复杂的方法来满足示例二的需要：

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

此方法使用过滤器遍历选定的li 列表并匹配所有具有属性data-city 的元素匹配正则表达式(^|,\s+)London(,|$) 这意味着...

• 开始或逗号 (^|,)
• 和一个或多个空格 (\s+)
• 后跟London
• 后跟逗号或结尾 (,|$)

我使用了这个 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>

Answer 2

试试类似的东西：

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

Attribute Contains Selector ^[docs]

jsfiddle example