Post
Ask Question

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


Similar Articles