คำว่า 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 ที่เรียกใช้
ตัวอย่างการใช้งาน
<!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 ตามคำสั่ง
minddezign says:
08/09/2552 at 08/09/2552
แจ๋วครับ พอดีผมกำลังเล่น jQuery ได้ 2 วันแหล่ะครับ
nightmare says:
08/09/2552 at 08/09/2552
หุหุหุ ขอบคุณครับ ว่าแต่ใช้โปรแกรมไรเขียนอ่ะครับหน้าตาแปลกไม่เคยเห็น อิอิ (ในที่สุดบ้านก็ติดเน็ตแล้วหลังจากห่างไกลความเจริญทางด้านเคลือข่ายมาแสนนาน)