คำสั่งนี้จะทำหน้าที่เหมือนกันกับคำสั่ง wrap() จะต่างกันก็ตรงที่ว่า คำสั่ง wrap() นั้นจะ wrap อีลิเม้นท์ทุกๆตัวที่เจอ แต่ wrapAll() จะ wrap แค่ครั้งเดียวเท่านั้น

ถ้า selector อยู่กันอย่างกระจัดกระจายบนเพจ มันจะย้ายทุกตัวมาอยู่ติดกันแล้ว wrap ทั้งหมด ทีเดียว

wrapAll(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 wrapAll command</title>
<script type="text/javascript">
$(document).ready(function(){
 
	$('#wrap_string').click(function(){
 
		$('.p1').wrapAll( '<i></i>' );
 
	});
 
	$('#wrap_selector').click(function(){
 
		$('.p1').wrapAll( $('h1') );
 
	});
 
})
</script>
</head>
<body>
 
<p class="p1">aaa</p>
 
<h1>XXX</h1>
 
<p class="p1">aaa</p>
 
<p class="p1">aaa</p>
 
<input type="submit" name="wrap_string" id="wrap_string" value="WrapAll (string)" />
<input type="submit" name="wrap_selector" id="wrap_selector" value="WrapAll (selector)" />
 
</body>
</html>

ในตัวอย่างจะเห็นว่า class=”p1″ อยู่อย่างกระจาย เมื่อคลิกปุ่ม WrapAll (string) p ทั้งหมดจะถูกย้ายไปอยู่ติดกันแล้วก็จะเอียง ถ้าคลิกปุ่ม WrapAll (selector) p 3 ตัวนั้นก็จะถูกย้ายไปอยู่ติดกันเหมือนเดิม แต่แล้ว p ทั้งหมดจะถูกแทนที่ด้วย <h1> บนเพจเลยเหลือแค่ <h1> 2 ตัว

คำสั่งแต่ละคำสั่งนั้น ผมแนะนำว่า ให้ท่านตั้งคำถามกับตัวเองว่า ถ้าอย่างนั้นมันจะเป็นอย่างไร ถ้าส่งนี่เข้าไปในพารามิเตอร์จะเป็นอย่างไร ถ้าส่งพารามิเตอร์ไม่เป็นไปตามกฎเกณฑ์จะเป็นอย่างไร แล้วลองเขียนทดสอบดู แล้วก็สังเกตุ ท่านจะได้ข้อสรุปอีกมากมาย

ทีนี้ท่านคงจะเกิดการสงสัยว่าคำสั่ง wrap กับ wrapall ที่ผมบอกว่า wrap ทั้งหมดกับ wrap ครั้งเดียว เป็นยังไง ผมได้ทำ

Live Demo

ให้ดูแล้วครับ คลิกโลด

class jQuery jQuery tutorial Live Demo wrapall
Avatar

วัชรเมธน์ ชิษณุคุปต์ ศรีเนธิโรทัย

Programmer, Blogger

ชีวิตมันคือการเดินทางเพื่อค้นหาอะไรบางอย่าง และเพื่อค้นพบอะไรบางอย่าง สิ่งที่รู้แล้วจะได้บอกกล่าวให้คนข้างหลังได้ฟัง เพื่อเดินลุยเข้าไปในพงหนามอย่างเตรียมใจไว้แล้วว่าอาจจะต้องเจ็บ