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 =＆＃39; 1＆＃39;）其中：

testname＆gt;重复＆gt; group_id = 1

Answer 1

是的，我知道的另一个属性是解决方案，但仍然......就像这样吗？

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

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

＆＃13;

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

＆＃13;

<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' />

＆＃13;

我建议使用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"]

＆＃13;

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

＆＃13;

<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' />

＆＃13;

Answer 2

jQuery使用css选择器。 json属性的data编码数据没有选择器。但是，你可以试试这样的东西

$('input[data-testname=\'{"repeat" : "{"group_id" : "1"}"}"\']').

我建议您使用filter()来获得更清晰的代码：

query = $('input').filter(function() {
  var json = JSON.parse($(this).data('testname'));
  return json.repeat.group_id == 1;
});

// Do whatever you want with 'query' jQuery object.

Answer 3

尝试使用filter()

<input type='text' data-testname='{"repeat" : {"group_id" : 1}}' value='value 1' /><input type='text' data-testname='{"repeat" : {"group_id" : 1}}' value='value 1' />
 var el =  $('[data-testname]').filter(function() {
  var data = $(this).attr('data-testname');
       if(JSON.parse(data).repeat.group_id  == 1)
             return this;
    });
console.log(el[0])

https://jsfiddle.net/enz70ud7/

在data属性中按对象值查找元素

3 个答案: