JavaScript Tutorial/jQuery/wrapAll

Материал из Web эксперт
Версия от 08:25, 26 мая 2010; Admin (обсуждение | вклад) (1 версия)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

30. Wrap all elements

<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>
         <p>Hello</p> <p>Hello</p> <p>Hello</p>
  </body>
</html>


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

<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>
          <p>World</p>
          <p>World</p>
          <div class="doublediv">asdf<div>
                 
    </body>
</html>


30. Wrap all with border

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

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


30. WrapAll With More Than One Tag

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

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