Contains in jQuery

Rahul Saxena
10y
5.4k
0
1

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