Another set of useful jQuery selectors are the content filter selectors.
These selectors allow you to select HTML elements based on the content inside the HTML element.
The syntax is $(“E:contains(value)”).
<!DOCTYPE html> <html> <head lang='en'> <meta charset='UTF-8'> <title>Codecrawl.com-Image</title> <script src='//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'></script> <script> $(function () { $("h4:contains('Ushuaia')").css('color', 'blue'); }); </script> </head> <body> <div> <h4>Ushuaia</h4> <p>Southernmost city in the world.</p> <img src='//codecrawl.com/code/images/ushuaia.jpg' height="200px"> </div> </body> </html>
If we make a slight change to the element by changing h4 to div, all content inside the div will be selected.
$("div:contains('Ushuaia')").css('color', 'blue');