Is there a faster way of selecting elements if the data attribute contains a value?

Question

Is there a more preferred way of doing this in terms of performance?

Example HTML:

<input type="text" data-attr="ABC XYZ" />
<div data-attr="XYZ"></div>

Example jQuery:

var myValue = 'XYZ';
$('[data-attr*="' + myValue + '"]').hide();

Is using classes better for this?

`$('[data-attr^="' + myValue + '"]').hide();` Use attribute contains word selector. It must be efficient than contains selector. — Rajaprabhu Aravindasamy, Mar 18 '16 at 15:41
This might help. http://stackoverflow.com/questions/11211222/jquery-check-if-attr-value — SG1Asgard, Mar 18 '16 at 16:36

score 0 · Answer 1 · answered Mar 18 '16 at 15:49

0

You could limit the selector only to input elements:

$('input[data-attr*="' + myValue + '"]').hide();

It reduces the surface area that the jQuery selector has to operate on

answered Mar 18 '16 at 15:49

Jamiec

133,658
13
134
193

I would but I have these data attributes on all types of elements. – Pat Migliaccio Mar 18 '16 at 15:50

score 0 · Accepted Answer · answered Mar 21 '16 at 13:19

0

After doing some testing between data-attr show/hide vs. class show/hide, the difference is about 20% at 1,000,000 iterations. But, user experience doesn't necessarily seem affected by this in my application.

answered Mar 21 '16 at 13:19

Pat Migliaccio

1,031
13
24

Is there a faster way of selecting elements if the data attribute contains a value?

2 Answers2