Imagine having the following HTML element:
<div class='element' data-info='{"id":789, "value":"example"}'></div>
By running this JavaScript code, you can access the object stored in the data attribute.
console.log($('.element').data('info'));
You can also retrieve specific data values like any other object.
console.log($('.element').data('info').value); //returns 'example'
Is there a way to select this element based on the data saved in its attribute? The initial attempt does not yield the desired results.
$('.element[data-info.id=789]');
It is possible to iterate through all instances of the element and check their data properties.
var idToFind = 789;
$('.element').each(function () {
if ($(this).data('info').id == idToFind) {
// perform an action
}
});
However, could this be inefficient? Are there alternative methods to achieve the same outcome without using a loop? Is iterating over elements slower than utilizing a selector?