contains selector in jQuery with example




  1. Contains selector returns elements that contains text matching the specified text.
  2. This selector can be used when we need to select elements based on text.


Example 1 :

    <html>
    <head>
    <title>contains Selector</title>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"> </script>
    <script type="text/javascript">
    $(document).ready(function()
    {
    $("#myButton").click(function()
    {
    $("div:contains('div2')").css({'background-color':'Green','font-size':'20px'});
    });
    });
    </script>
    </head>
    <body>
    <div>This is div1 element.</div>
    <div>This is div2 element.</div>
    <div>This is div3 element.</div>
    <button id="myButton" style="margin-left:50px;">Click Me</button>
    <button onclick="location.reload()">Reset</button>
    </body>
    </html>
    

Demo :





 In the above example, we have used contains selector. Contains selector selects elements that has text matching the specified text. In the above example the contains selector selects Div2 as its content matches the specified text.

0 comments:

Post a Comment