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

Question

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

考虑一下这个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>

jQuery中选择数据城市属性中所有"纽约"人物的最佳方法是什么？

解决方案应该考虑到某些城市名​​称出现在其他城市名称中(例如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中选择数据城市属性中所有"伦敦"的人的最佳方法是什么？不应选择带有"新伦敦"的城市.

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>