JQuery if () vs: contains

Question

What is a more efficient way to write this:

if ($('.shipping .price').text() === "FREE"){ $('.shipping .price').addClass('text-primary'); } 

OR

 $('.shipping .price:contains("FREE")').addClass('text-primary'); 

Answer 1

A quick test shows that code with if is about 5 times faster than code with contains selector. However, as noted in the comments, the two are not equivalent.

You can speed up the process by adding call caching to $('.shipping .price') as follows:

 var elem = $('.shipping .price'); if (elem.text() === "FREE"){ elem.addClass('text-primary'); } 

However, for almost all real-life scenarios, performance differences will not matter, and you should go for an option that is more readable for other people. If you really care about performance (for example, if you have a rather large price list), you should use vanilla JS, which in this case will be about 10 times faster.