Contains in jQuery

Scenario

Assume you have many divs in your aspx page and you have some string values inside these DIVs. Now let say you want to check if a DIV has "XXX" string values that make the background colorful. The following is my ASPX to do that:

  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Contains_In_jQuery.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Contains in jQuery</title>  
  8.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  9.   
  10.     <script>  
  11.         $(document).ready(function () {  
  12.             $("div:contains('AMX')").css("background-color""red");  
  13.         });  
  14.     </script>  
  15. </head>  
  16. <body>  
  17.     <form id="form1" runat="server">  
  18.         <div>Amol Malhotra - AMX</div>  
  19.         <div>Shambhu Sharma - AMX</div>  
  20.         <div>Hemant Chopra - HWN</div>  
  21.         <div>Rahul Saxena - AMX</div>  
  22.         <div>Yogesh Gupta - AMX</div>  
  23.         <div>Shraddha Gaur - AMX</div>  
  24.         <div>Abhishek Nigam - HWN</div>  
  25.         <div>Shweta Kashyap - AMX</div>  
  26.         <div>Saurabh Mehrotra - PHNX</div>  
  27.         <div>Mayank Dhulekar - USA</div>  
  28.         <div>Mehak Jain - HWN</div>  
  29.         <div>Rakesh Dixit - AMX</div>  
  30.         <div>Akhilesh Atwal - KS</div>  
  31.     </form>  
  32. </body>  
  33. </html>  
Now run your application and the output will be as shown in Figure 1.

Run your Application
Figure 1

If you want to set more than one setting in CSS  properties:
  1. <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Contains_In_jQuery.Default" %>  
  2.   
  3. <!DOCTYPE html>  
  4.   
  5. <html xmlns="http://www.w3.org/1999/xhtml">  
  6. <head runat="server">  
  7.     <title>Contains in jQuery</title>  
  8.     <script src="Scripts/jquery-2.1.4.min.js"></script>  
  9.   
  10.     <script>  
  11.         $(document).ready(function () {  
  12.             //$("div:contains('AMX')").css("background-color", "red");  
  13.             $("div:contains('AMX')").css({ "background-color""yellow""font-size""140%""color":"red" });  
  14.         });  
  15.     </script>  
  16. </head>  
  17. <body>  
  18.     <form id="form1" runat="server">  
  19.         <div>Amol Malhotra - AMX</div>  
  20.         <div>Shambhu Sharma - AMX</div>  
  21.         <div>Hemant Chopra - HWN</div>  
  22.         <div>Rahul Saxena - AMX</div>  
  23.         <div>Yogesh Gupta - AMX</div>  
  24.         <div>Shraddha Gaur - AMX</div>  
  25.         <div>Abhishek Nigam - HWN</div>  
  26.         <div>Shweta Kashyap - AMX</div>  
  27.         <div>Saurabh Mehrotra - PHNX</div>  
  28.         <div>Mayank Dhulekar - USA</div>  
  29.         <div>Mehak Jain - HWN</div>  
  30.         <div>Rakesh Dixit - AMX</div>  
  31.         <div>Akhilesh Atwal - KS</div>  
  32.     </form>  
  33. </body>  
  34. </html>  
Run your application and the output will be as shown in Figure 2.

Run
Figure 2

You can use more than one check as in the following:
  1. <script>  
  2.         $(document).ready(function () {  
  3.             //$("div:contains('AMX')").css("background-color", "red");  
  4.             $("div:contains('AMX')").css({ "background-color""yellow""font-size""100%""color""red" });  
  5.             $("div:contains('HWN')").css({ "background-color""Skyblue""font-size""100%""color""white" });  
  6.         });  
  7. </script>  
put more than one check
Figure 3

Up Next
    Ebook Download
    View all
    Learn
    View all