CODEWITHSUNDEEP
javascriptjqueryhtml
George
George

Reputation: 23

find element by object value inside data attribute

I have the following situation. Have input, which has object in data attribute:

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

Is there any selector, without loop, to find all element in document, without adding new data attribute (data-group_id = '1') where:

testname > repeat > group_id = 1

Upvotes: 2

Views: 935

Answers (3)

madalinivascu
madalinivascu

Reputation: 32354

try something with 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/

Upvotes: 0

Wikiti
Wikiti

Reputation: 1636

jQuery uses css selectors. There are no selectors for json encoded data for data attributes. However, you can try something like this

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

I recommend you to use filter() for a cleaner code:

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.

Upvotes: 0

Tushar
Tushar

Reputation: 87233

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

Yes, you can use attribute-value selector

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

I'll recommend to use data-* attribute as follow

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

And then use attribute-value selector

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

Upvotes: 2

Related Questions