คำว่า wrap ในภาษาอังกฤษ แปลว่า ห้อมล้อม หรือล้อม คำสั่ง wrap() นี้ก็เช่นกัน มันจะเอาพารามิเตอร์ซึ่งเป็นเท็ก html เปิด และ ปิด ไปล้อมเป้าหมาย ดู html นี้

<em><strong>content</strong></em>

จากด้านบน เรากล่าวได้ว่า แท็ก <em> wrap แท็ก <strong> อยู่

wrap(wrapper)

wrapper :(string|selector) string จะต้องเป็นแท็ก html ที่มีทั้งแท็กเปิดและแท็กปิด “<i></i>”

ฟังก์ชั่นนี้จะนำเอาพารามิเตอร์ที่ส่งเข้าไป ไปล้อม selector ที่เรียกใช้ฟังก์ชั่น โดยแบ่งออกเป็น 2 กรณี กรณีที่ส่งแท็กเปิดปิดของ html (string) เข้าไป มันจะนำแท็กเปิดและปิด ไปล้อม selector ที่เรียกใช้ แต่ถ้าส่ง selector เข้าไปในฟังก์ชั่น มันจะก้อปปี้ selector ที่ส่งเข้าไป ไปแทนที่ selector ที่เรียกใช้

ตัวอย่างการใช้งาน

Live Demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<title>jquery wrap command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#wrap_string').click(function(){
 
		$('.p1').wrap( '<i></i>' );
 
	});
 
	$('#wrap_selector').click(function(){
 
		$('.p1').wrap( $('h1') );
 
	});
 
})
</script>
</head>
<body>
 
<p class="p1">aaa</p>
 
<h1>XXX</h1>
 
<input type="submit" name="wrap_string" id="wrap_string" value="Wrap (string)" />
<input type="submit" name="wrap_selector" id="wrap_selector" value="Wrap (selector)" />
 
</body>
</html>

เมื่อกดปุ่ม Wrap (string) ตัว aaa จะแสดงเป็นตัวเอียง แต่ถ้ากดปุ่ม Wrap (selector) aaa จะถูกแทนที่ด้วย XXX

$('.p1').wrap( '<i></i>' )

ส่งแท็กเปิดปิดของ html เข้าไปอย่างนี้จะให้ผล แท็กที่มีคลาส p1 เป็นตัวเอียง

$('.p1').wrap( $('h1') )

ส่ง selector เข้าไปจะให้ผล แท็กที่มีคลาส p1 ถูกแทนที่ด้วย <h1> ที่มีอยู่ในเพจ


ภาพตอนรันใหม่ๆ ยังไม่ได้คลิกปุ่มใดๆ ส่องด้วย firebug


หลังจากคลิกปุ่ม Wrap (string) จะเห็นว่า jquery จะนำแท็ก <i> ไปคร่อม p ตามคำสั่ง