Contains element (:has(E))

In this chapter you will learn:

Description and Syntax for contains element selector
Examples for contains element selector
How to select div element with paragraph inside

Description and Syntax

$('p:has(E)')

selects all elements that contain an element matching E.

Examples

$('p:has(img)') selects all <p> elements that contain an <img> element as a descendant
$('.myclass:has(#myid)') selects all elements with the class myclass that contain a descendant with ID myid
$('p:has(img)') matches the <p> element in the following HTML code:

<div id="container">//from  j  a va 2s .  co  m
 <div id="inner">
 <p>
 <span><img src="example.jpg" alt="" /></span>
 </p>
 </div>
</div>

The following code marks table row which has table data.

<html><!--  j  a  va 2 s  . c o  m-->
  <head>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
               
            $("tr:has(td)").css("color","red");
        });
    </script>

  </head>
  <body>
    <body>
    <table>
        <tr><td>First</td></tr>
        <tr><td>java2s.com</td></tr>
        <tr><td>java2s.com</td></tr>
    </table>


    </body>
</html>

Click to view the demo

Select div with paragraph element

Select if DIV has paragraph tag.

<html><!--from j a  v a 2  s. c  o  m-->
  <head>
    <style>
      .test{ border: 1px solid red; }
    </style>
    <script src="http://java2s.com/style/jquery-1.8.0.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
         $("div:has(p)").addClass("test");
    });
    </script>
  </head>
  <body>
      <div><p>paragraph in div</p></div>
      <div>div</div>
  </body>
</html>