8

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 中选择 data-city 属性中所有具有“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>

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

4

2 回答 2

36

您可以使用选择器来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>
于 2011-09-08T07:14:57.177 回答
2

尝试类似：

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

Attribute Contains Selector [文档]

jsfiddle 示例

于 2011-09-08T07:13:40.413 回答