Contains in jQuery

Article

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 1

If 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", "red");
$("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.

Run

Figure 2

You can use more than one check as in the following:

<script>
$(document).ready(function () {
//$("div:contains('AMX')").css("background-color", "red");
$("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