jQuery Selector How to - Selects paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs

Question

We would like to know how to selects paragraphs, finds span elements inside these, and reverts the selection back to the paragraphs.

Answer


<!--from  w  w  w.jav a2 s  .com-->
<html>
  <head>
    <script type="text/javascript" src='http://code.jquery.com/jquery-1.5.2.js'></script>
    <script type="text/javascript">
        $(document).ready(function(){
              $("p").find("span").end().css("border", "2px red solid");
        });
    </script>
    <style>
      .selected { color:blue; }
      
    </style>
    
  </head>
  <body>
          <p><span>Hello</span>, how are you?</p>
  </body>
</html>

The code above is rendered as follows: