JavaScript Tutorial/jQuery/wrapAll

Материал из Web эксперт
Перейти к: навигация, поиск

30. Wrap all elements

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             
            $("p").wrapAll(document.createElement("div"));


       });
   </script>
 <style>
     div { border: 2px solid blue; }
 </style>
   
 </head>
 <body>
   <body>

Hello

Hello

Hello

 </body>

</html></source>


30. wrapAll(html): each element in the matched set would get wrapped with an element.

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
         $("p").wrapAll($(".doublediv"));
               
        
       });
   </script>
   <style>
     .doublediv { color:red; }
   </style>
   
 </head>
 <body>
   <body>

World

World

asdf
   </body>

</html></source>


30. Wrap all with border

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
$("p").wrapAll("
");
       });
   </script>
 <style>
     div { border: 2px solid blue; }
 </style>
   
 </head>
 <body>
   <body>

Hello

Hello

Hello

 </body>

</html></source>


30. WrapAll With More Than One Tag

   <source lang="javascript">

<html>

 <head>
   <script type="text/javascript" src="js/jquery-1.3.2.js"></script>
   <script type="text/javascript">
       $(document).ready(function(){
             
$("p").wrapAll("
asdf
");
       });
   </script>
 <style>
     div { border: 2px solid blue; }
 </style>
   
 </head>
 <body>
   <body>

Hello

Hello

Hello

 </body>
</html></source>