jquery - 正确的 CSS 语法通过 jquery 获取 json 编码的数据属性

Question

我需要获取 data-people 中的 json 编码数据之一:

<ul>
  <li data-test="one" data-people='{"name" : "Paul", "color" : "black"}'>Paul</li>
  <li data-test="two" data-people='{"name" : "John", "color" : "blond"}'>John</li>
  <li data-test="three" data-people='{"name" : "Jane", "color" : "black"}'>Jane</li>
</ul>

通过数据测试获取数据非常简单(仅作为示例):

$('ul li[data-test="two"]').show();

现在我想向 ul li 展示金色的数据人员(忽略仅在上述示例中存在的数据测试)。

我在下面进行了测试，但这并没有按预期工作:

$('ul li[data-people="{"color": "blond"}"]').show();

我不是要获取像这样的颜色值:$('ul li').data('people').color，而是要做适当的 CSS对象内部的语法。

非常感谢任何提示。谢谢。

Answer 1

除了使用 *=(“属性包含”)选择器之外，您不能仅使用选择器以任何干净的方式执行此操作。只有当 JSON 恰好 包含该子字符串时，它才会起作用 - 删除 : 之前的空格，它将停止工作。

$('ul li[data-people*=\'"color" : "blond"\']').show();

您可能真正想要的是.filter():

$('ul li[data-people]').filter(function() {
    return $(this).data('people').color == 'blond';
}).show();

通过这种方式，您可以使用(快速)CSS 选择器引擎仅获取相关元素(具有 data-people 属性的元素)，然后使用回调函数过滤结果集。