CODEWITHSUNDEEP
javascriptjqueryhtml
abdulmanov.ilmir
abdulmanov.ilmir

Reputation: 1375

How to find dynamically added element by data attribute using jQuery?

There is an element to which is dynamically applied data attribute like this

var tr = $('<tr>');
tr.data('template_id', 5);
table.find('tbody').append(tr);

Here we have our tr on the table.
...
Here we want to find our newly added tr by data attribute

var tr = table.find('[data-template_id="5"]');
console.log(tr) // tr.length = 0;

Unfortunately, we have no found tr this way.
Why it is getting this result?

Upvotes: 4

Views: 1928

Answers (3)

long
long

Reputation: 59

I think you can use

tr.attr('template_id', 5);

Upvotes: -1

Pavla Nov&#225;kov&#225;
Pavla Nov&#225;kov&#225;

Reputation: 796

Try tr.attr("data-template_id", 5) instead of tr.data('template_id', 5).

Upvotes: 1

Rory McCrossan
Rory McCrossan

Reputation: 337580

The issue you have is that data-* attributes added via jQuery are stored in its internal cache. They are not available as attributes in the DOM. With that in mind, you can use filter() to achieve what you require:

var $tr = table.find('tr').filter(function() {
    return $(this).data('template_id') == 5;
});
console.log($tr.length);

Upvotes: 11

Related Questions