Next »
1949/1956
« Previous

Contains element (:has(E))

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">
 <div id="inner">
 <p>//  ww  w .  j  a v  a 2s .c om
 <span><img src="example.jpg" alt="" /></span>
 </p>
 </div>
</div>

The following code marks table row which has table data.


<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 .ja  v  a2  s  .com-->
               
            $("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

The code above generates the following result.

Contains element (:has(E))

Select div with paragraph element

Select if DIV has paragraph tag.


<html>
  <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(){<!--from  w w  w  . j a  va 2 s  . c om-->
         $("div:has(p)").addClass("test");
    });
    </script>
  </head>
  <body>
      <div><p>paragraph in div</p></div>
      <div>div</div>
  </body>
</html>

Click to view the demo

The code above generates the following result.

Contains element (:has(E))
Next »
« Previous