In this article am going to show how we can use contain
in jQuery. I will explain this thing by
showing various scenarios.
Scenarios
1# Suppose you have many Div in your aspx page. And you
have some string values inside these DIV and you want to apply a check if this
DIV has 'XXX' string values the make background colorful.
Below
is my ASPX to achieve this:
<%@ 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:
Image 1.
If you want to set More than one setting in CSS in
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:
Image 2.
You can put more than one check like below:
<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>
Image 3.