jQuery find() element by data attribute, which value is object

Question

I'm trying to find element with jQuery by its data attribute value. The problem is, that the value is object and find() function doesn't work properly for me... Data attribute value looks like this:

<tr class="odd" data-row="{"id_construction":2,"created_date":2015-11-30}">

And here is my script:

for(var i = 0; i < dataList.length; ++i){
    var constructionId = dataList[i].id_construction;
    if (constructionId == selectedConstructionId) {
        $('.gridator').find('tr[data-row={id_construction:}').addClass('selected-construction');
    }
}

value of dataList[i] is {"id_construction":2,"created_date":2015-11-30}

How should I edit this script to find the wanted element? (Element which data-row value is equal to dataList[i] value)

Fiddle: https://jsfiddle.net/og1j1wc3/4/

it's completely unclear what do mean by find the wanted element? — Curiousdev
– Curiousdev, Commented Apr 24, 2017 at 8:47
@Curiousdev Element which data-row value is equal to dataList[i] value — HS1993
– HS1993, Commented Apr 24, 2017 at 8:49
First of all do data-row='{"id_construction":2,"created_date":2015-11-30}' on your tr since your data-row would return only a { — Carsten Løvbo Andersen
– Carsten Løvbo Andersen, Commented Apr 24, 2017 at 8:49
try $('.gridator').find('tr[data-row='+dataList[i]+']') since tr has the attribute you are selecting — guradio
– guradio, Commented Apr 24, 2017 at 8:50
@guradio it threw me this log: Error: Syntax error, unrecognized expression: tr[data-row=[object Object]] — HS1993
– HS1993, Commented Apr 24, 2017 at 8:52

Yeldar Kurmangaliyev · Accepted Answer · 2017-04-24 09:14:39Z

2

jQuery attribute selectors work with strings, not with objects stored as JSON.
You will have to iterate through every attribute value in order to find a necessary object:

var $greens = $("div").filter(function() {
  return $(this).data("p").isGreen === true;
});

console.log($greens.length); // 3
$greens.css("color", "green");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div data-p='{"isGreen": true}'>
  one
</div>
<div data-p='{"isGreen":true    }'>
  two
</div>
<div data-p='{"isGreen": false}'>
  three
</div>
<div data-p='{ "otherAttribute": 42, "isGreen": true }'>
  four
</div>

As you can see in this snippet, whitespaces and other attributes do not affect how this works because your work with it as with data, not as a string.

Note that according to documentation jQuery .data() returns an object if data attribute contains JSON object:

Every attempt is made to convert the string to a JavaScript value (this includes booleans, numbers, objects, arrays, and null).
When the data attribute is an object (starts with '{') or array (starts with '[') then jQuery.parseJSON is used to parse the string; it must follow valid JSON syntax including quoted property names. If the value isn't parseable as a JavaScript value, it is left as a string.

edited Apr 24, 2017 at 9:14

answered Apr 24, 2017 at 9:09

Yeldar Kurmangaliyev

34.3k13 gold badges64 silver badges104 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

HS1993 Over a year ago

It works here great, but when I tried to use it, got this log: TypeError: $(...).data(...) is undefined[Learn More]

Yeldar Kurmangaliyev Over a year ago

@HS1993 If it works here, then may be you do something wrong :) Show how use use and reproduce this problem at JSFiddle.

Yeldar Kurmangaliyev Over a year ago

@HS1993 As you can see, JSFiddle highlights your HTML with red color, because your HTML syntax is incorrect. You have a quote inside attribute which closes an attribute. It is simply invalid.

HS1993 Over a year ago

But it's generated in PHP:

echo '<tr class="' . (($i%2) ? 'odd' : 'even') . '" data-row=\'' . htmlspecialchars($_control->prepareJsonRowData((array)$row)) . '\'>';

where I tried to replace quotes (as you can see) but still the same error..

Yeldar Kurmangaliyev Over a year ago

@HS1993 I do not know PHP and can't help with it :) I can tell you how to solve this JS problem and it works. You can validate the HTML from this fiddle using any HTML validator and will get errors.

|

Collectives™ on Stack Overflow

jQuery find() element by data attribute, which value is object

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related