Next »
1948/1956
« Previous

Contains text (:contains(text))

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(){<!-- w w  w .ja  v  a  2s  . c o  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

The code above generates the following result.

Contains text (:contains(text))

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(){<!--  w w w  .j  av a 2  s .  co m-->
             $("p").remove(":contains('Hello')");
        });
    </script>
  </head>
  <body>
    <body>
       <p class="hello">Hello</p>
    </body>
</html>

Click to view the demo

The code above generates the following result.

Contains text (:contains(text))

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(){<!--from w  ww.j  av a  2  s .  c  om-->
        $("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

The code above generates the following result.

Contains text (:contains(text))
Next »
« Previous