我想构建一个可通过多个参数查询的对象。我想出的方式是使用数据属性存储数据并使用jQuery“搜索”工作,但我不喜欢它。
为了快速演示,我保留了我的“数据”:
<span data-color="red blue" data-name="bill" data-value="47"></span>
<span data-color="blue green white" data-name="jane" data-value="13"></span>
<span data-color="red" data-name="mary jack" data-value="35"></span>
<span data-color="green" data-name="bill" data-value="43"></span>
<span data-color="white" data-name="steve" data-value="123"></span>
因此,如果我想将所有值与“红色”匹配,我可以这样做:
$("span[data-color~='red']").each(...);
如果我想匹配所有命名的“bill”和颜色“green”,我会像这样搜索
$("span[data-color~='green'][data-name~='bill']").each(...);
虽然这感觉有点聪明,但也感觉有点hacky,用CSS选择器欺骗Javascript到查询中。有没有更好的方法可以存储和访问数据?请求可能很多,所以我希望它快速,而不是发出http请求来查询数据服务器端。在我的情况下,可能有数百个条目要搜索(我不喜欢CSS选择器路由的另一个原因)。
谢谢!
答案 0 :(得分:3)
使用普通的Javascript对象数组,然后使用数组方法进行过滤,迭代等。不需要jQuery。例如:
const arr = [
{ colors: ['red', 'blue'], name: 'bill', value: 47 },
{ colors: ['blue', 'green', 'white'], name: 'jane', value: 13 },
{ colors: ['red'], name: 'mary jack', value: 35 },
{ colors: ['green', 'blue'], name: 'bill', value: 88 },
];
const reds = arr.filter(({ colors }) => colors.includes('red'));
console.log(reds);
const greenBills = arr.filter(({ colors, name }) =>
colors.includes('green') && name === 'bill'
);
console.log(greenBills);
&#13;