Learning jQuery

jQuery has ":contains" selector which can be used to select all elements with specific text. But default behavior of contains selector is case sensitive. For ":contains" the word "jquery" and "jQuery" are different. Let's find out using a simple demo.

Below jQuery code will hide all the "p" tag element which contains "jquery" as text.

$("p:contains('jquery')").hide();

See result below

In above demo, the P tags with "jQuery" text are visible all the time. So that proves that it is case sensitive. But what if you want to make it case insensitive? Yes it can be done.

Well, there is a way by which you can extend the default behavior of contains and make it case-insensitive.

jQuery.expr[':'].contains = function(a, i, m) {
 return jQuery(a).text().toUpperCase().indexOf(m[3].toUpperCase()) >= 0;
};

See result below

Feel free to contact me for any help related to jQuery, I will gladly help you.