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

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>

人名1


人名2

在jQuery中，选择数据城市属性中具有“New York”的所有人员的最佳方法是什么

解决方案应考虑到某些城市名称出现在其他城市名称中（示例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>

人名1


人名2

在jQuery中，选择数据城市属性中带有“伦敦”的所有人员的最佳方法是什么？不应选择具有“新伦敦”的城市。

尝试以下方法：

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

---

您可以使用选择器

标记[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

匹配，该属性匹配regex

（^ |，\s+）London（，|$）

，这意味着

• 起始或逗号（

  ^ |，

  ）
• 和一个或多个空格（

  \s+

  ）
• 接着是伦敦
• 后跟逗号或结尾（

  ，|$

  ）

我使用了以下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>

人名1


人名2


人名3

不能有多个id值相同的元素。html可能重复，因此所有元素都有唯一的idp.s。您应该始终使用unique id字段，如果您想要一种类型的东西而不是特定的东西，您应该使用class代替。感谢您提供的解决方案，但它并不能解决示例2中的问题（我为问题添加了另一个示例）感谢@Billymon提供的过滤器，值得注意的是，页面上的每个

li

都需要具有属性data city，否则这将抛出一个错误。感谢您的解决方案，但它并没有解决示例2中的问题（我为问题添加了另一个示例）