javascript - 通过 data 属性内的对象值查找元素

Question

我有以下情况。 有输入，数据属性中有对象:

<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 1' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 2' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 3' />

是否有任何选择器，没有循环，可以查找文档中的所有元素，而不添加新的数据属性(data-group_id = '1')，其中:

测试名称 > 重复 > group_id = 1

Answer 1

Yes, another attribute i know, is solution, but still..... is there way like this?

是的，您可以使用属性值选择器

input[data-testname='{"repeat" : "{"group_id" : "1"}"}']

input[data-testname='{"repeat" : "{"group_id" : "1"}"}'] {
  color: green;
  font-weight: bold;
}

<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 1' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 2' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "1"}"}' value='value 3' />


<input type='text' data-testname='{"repeat" : "{"group_id" : "2"}"}' value='value 1' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "3"}"}' value='value 2' />
<input type='text' data-testname='{"repeat" : "{"group_id" : "4"}"}' value='value 3' />

我建议使用 data-* 属性，如下所示

<input type='text' data-group-id="1" value='value 1' />
<input type='text' data-group-id="1" value='value 2' />
<input type='text' data-group-id="1" value='value 3' />

然后使用属性值选择器

input[data-group-id="1"]

input[data-group-id="1"] {
  color: green;
  font-weight: bold;
}

<input type='text' data-group-id="1" value='value 1' />
<input type='text' data-group-id="1" value='value 2' />
<input type='text' data-group-id="1" value='value 3' />

<input type='text' data-group-id="2" value='value 2' />
<input type='text' data-group-id="3" value='value 3' />
<input type='text' data-group-id="4" value='value 4' />