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:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Contains_In_jQuery.Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Contains in jQuery</title>
- <script src="Scripts/jquery-2.1.4.min.js"></script>
-
- <script>
- $(document).ready(function () {
- $("div:contains('AMX')").css("background-color", "red");
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>Amol Malhotra - AMX</div>
- <div>Shambhu Sharma - AMX</div>
- <div>Hemant Chopra - HWN</div>
- <div>Rahul Saxena - AMX</div>
- <div>Yogesh Gupta - AMX</div>
- <div>Shraddha Gaur - AMX</div>
- <div>Abhishek Nigam - HWN</div>
- <div>Shweta Kashyap - AMX</div>
- <div>Saurabh Mehrotra - PHNX</div>
- <div>Mayank Dhulekar - USA</div>
- <div>Mehak Jain - HWN</div>
- <div>Rakesh Dixit - AMX</div>
- <div>Akhilesh Atwal - KS</div>
- </form>
- </body>
- </html>
Now run your application and the output will be as shown in Figure 1.
Figure 1If you want to set more than one setting in CSS properties:
- <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Contains_In_jQuery.Default" %>
-
- <!DOCTYPE html>
-
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head runat="server">
- <title>Contains in jQuery</title>
- <script src="Scripts/jquery-2.1.4.min.js"></script>
-
- <script>
- $(document).ready(function () {
-
- $("div:contains('AMX')").css({ "background-color": "yellow", "font-size": "140%", "color":"red" });
- });
- </script>
- </head>
- <body>
- <form id="form1" runat="server">
- <div>Amol Malhotra - AMX</div>
- <div>Shambhu Sharma - AMX</div>
- <div>Hemant Chopra - HWN</div>
- <div>Rahul Saxena - AMX</div>
- <div>Yogesh Gupta - AMX</div>
- <div>Shraddha Gaur - AMX</div>
- <div>Abhishek Nigam - HWN</div>
- <div>Shweta Kashyap - AMX</div>
- <div>Saurabh Mehrotra - PHNX</div>
- <div>Mayank Dhulekar - USA</div>
- <div>Mehak Jain - HWN</div>
- <div>Rakesh Dixit - AMX</div>
- <div>Akhilesh Atwal - KS</div>
- </form>
- </body>
- </html>
Run your application and the output will be as shown in Figure 2.
Figure 2You can use more than one check as in the following:
- <script>
- $(document).ready(function () {
-
- $("div:contains('AMX')").css({ "background-color": "yellow", "font-size": "100%", "color": "red" });
- $("div:contains('HWN')").css({ "background-color": "Skyblue", "font-size": "100%", "color": "white" });
- });
- </script>
Figure 3