wrapAll(html) trong jQuery



Miêu tả

Phương thức wrapAll(html) trong jQuery sẽ Wrap tất cả phần tử trong tập hợp đã so khớp vào trong một phần tử bao bọc đơn (html là phần tử HTML).

Cú pháp

Sau đây là cú pháp cho wrapAll(html) trong jQuery:

selector.wrapAll( html )

Tham số

Dưới đây miêu tả chi tiết về các tham số được sử dụng trong phương thức wrapAll(html) trong jQuery:

  • html − Một chuỗi của HTML mà sẽ được tạo và được wrap xung quanh mỗi mục tiêu.

Quảng cáo

Ví dụ

Sau đây là ví dụ đơn giản minh họa cách sử dụng của phương thức wrapAll(html) trong jQuery. Nó sẽ wrap tất cả hình vuông bởi một hình vuông mới.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
		
      <script type="text/javascript" language="javascript">
         $(document).ready(function() {
            $("div").click(function () {
               var content = "<div class='div'></div>";
               $("div").wrapAll( content );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
		
   </head>
	
   <body>
	
      <p>Click on any square below to see the result:</p>
		
      <div class="div" id="destination">THIS IS TEST</div>
      <div class="div" style="background-color:blue;">ONE</div>
      <div class="div" style="background-color:green;">TWO</div>
      <div class="div" style="background-color:red;">THREE</div>
		
   </body>
	
</html>

Nó sẽ cho kết quả:

Các bài học jQuery khác tại VietJack:


thao_tac_dom_trong_jquery.jsp