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>

Answer 2

尝试类似：

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

Attribute Contains Selector ^[docs]

jsfiddle example

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

2 个答案: