jQuery Contains text selector

Description and Syntax

$(':contains(text)')

select all elements that contain the specified text. The text must have matching case to be selected.

Examples

  • $('p:contains(nothing special)') selects all <p> elements that contain the text nothing special
  • $('li:contains(second)') selects all <li> elements that contain the text second

The following code finds a table cell with letter F.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--from ww  w .j a  va 2 s  .co m-->
               $("tr:contains('F')").css("background-color", "#bbbbff");
        });
    </script>
  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>Middle</td></tr>
        <tr><td>Last</td></tr>
    </table>
    </body>
</html>

Click to view the demo

Remove by content

The following code removes elements which contains Hello.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){<!--   ww w .j  a va 2s .  c o m-->
             $("p").remove(":contains('Hello')");
        });
    </script>
  </head>
  <body>
    <body>
       <p class="hello">Hello</p>
    </body>
</html>

Click to view the demo

Mark under line by content

The following code marks div which contains J.


<html>
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){<!--  w w w. j  av a  2s .com-->
        $("div:contains('J')").css("text-decoration", "underline");
    });

    </script>
 <style>
  div { background:yellow; width:80px; height:80px; margin:5px; float:left; }


  </style>

  </head>
  <body>
      <div>Java</div>
      <div>C#</div>
      <div>JavaScript</div>
      <div>CSS</div>
      <div>Ja va2s.com</div>
      <div>ja va2s.com</div>
      <div>Java2s.com</div>
  </body>
</html>

Click to view the demo





















Home »
  jQuery »
    jQuery Tutorial »




Basics
Selector
DOM
Event
Effect
Utilities