javascript - 如何使用多个属性选择器但针对特定属性值？

Question

我正在使用 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 键。

我怎样才能做到这一点？

Answer 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。}