You can edit / change the code and click run button
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <script src="../../../ajax/libs/jquery/1-11-3/jquery.min.js"></script> <script> $(document).ready(function(){ $("p").filter(".good").css("background-color", "yellow"); $("p").filter(".bad").css("background-color", "green"); }); </script> <script>var clicky_site_ids = clicky_site_ids || []; clicky_site_ids.push(101319977);</script><script async src="//static.getclicky.com/js"></script></head> <body> <h1>jQuery filter Method Example</h1> <p class="bad">Tommy is a bad boy</p> <p class="good">Mike is a Good boy</p> <p class="bad">Jimmy is a Bad boy</p> <p class="good">James is a Good boy.</p> <p class="bad">Rosy is a bad boy</p> <p class="bad">Tony is a Bad boy</p> <p class="good">Cameron is a Good boy</p> <p class="good">Rick is a Good boy.</p> <p>It will <b>filter</b> all the paragraphs which contain it's class name as <font color="red">"bad"</font></b> and applies the green color background to it</p> <p>It will <b>filter</b> all the paragraphs which contains it's class name as <font color="red">"good"</font></b> and applies the yellow color background to it</p> </body> </html>