正确的CSS语法来获得JSON编码数据的jQuery

Question

属性，我需要获取数据，里面的人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华里。

下面我测试，但预期这不起作用：

$('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属性）这种方式，然后使用回调函数过滤结果集。