0

我需要在 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 语法。

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

4

1 回答 1

5

*=除了使用("attribute contains") 选择器之外，您不能仅使用选择器以任何干净的方式执行此操作。只有当 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属性的元素），然后使用回调函数过滤结果集。

于 2013-01-06T12:31:40.620 回答