Email: Password:       Forgot Password 
    .netCodeSG
A Saarsha Group Online Community for dot net codes group like C#, Asp.NET, VB.NET, Sharepoint, JavaScript, JQuery, Ajax, SQL, WCF, WPF.
 
TECHNOLOGIES:
 

Contains in jQuery

Article:
Viewed:  861 
Posted On:  7/18/2015 8:32:20 PM 
How we can check a text inside a div using jQuery? 

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:

1.png

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:

2.png

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>

3.png

Image 3.

  Comment:
         HOME   |   Submit Article   |   Contact Us   |   About Us   |   Terms & Condition   |   Advertise With us