如何使用多个属性选择器但用于/具有特定属性值？

Posted 2023-05-09

【中文标题】如何使用多个属性选择器但用于/具有特定属性值？

【英文标题】：How to use multiple attribute selectors but for/with specific attribute values?

【发布时间】：2014-07-24 16:36:24

【问题描述】：

我正在使用 jQuery，我有以下 html 代码：

<a href="/link" data-a='"one":"sample1","two":"sample2"' data-b="true">Title</a>

我想通过使用multiple attribute selectors 来找到上面的链接，但对于/具有包含在data-* 属性中的特定值。也就是我可以这样找到上面的链接

selector = 'a[data-a][data-b]'
$(selector).bind(...)

但我想通过查找具有data-a 和data-b 属性并且其属性data-a 包含one 键的链接来更具体。

我该怎么做？

【问题讨论】：

不行，解析属性的内容超出了attribute selectors的范围。您需要手动执行此操作。

@Bergi - 如果是这样，我该如何/应该如何改进代码和相关的选择器？

你可以尝试使用*=这样的运算符a[data-a*='"one"'][data-b] ...

恐怕你编辑的HTML代码不是格式良好的JSON字符串，应该是data-a='"one":"sample1","two":"sample2"'

【参考方案1】：

解析属性的内容超出了attribute selectors的范围。您需要通过 filtering 选择的元素手动执行此操作：

$('a[data-a][data-b]').filter(function() 
    try 
        return "one" in JSON.parse($(this).attr("data-a"));
     catch(e) 
        return false;
    
).on(…)

您当然可以implement a custom selector（或use a regex selector¹），但这不会有太大区别。并且可能会显着降低性能。

_{1：呃，最好不要使用 JSON。}

【参考方案2】：

这会起作用，但不能保证 data-a 是有效的 json 哈哈

select = 'a[data-a*=\'"one":"\'][data-b]';

使用“包含”选择器：http://api.jquery.com/attribute-contains-selector/

【参考方案3】：

我们可以通过.filter()第一组集合来确保元素的data-*属性是否包含特定的key。

你可以这样做，

$('a[data-a][data-b]').filter(function()
 return 'key' in JSON.parse($(this).data('a'));
).bind(..)