คำสั่ง before นี้จะมีความคล้ายคลึงกับคำสั่ง prepend ท่านต้องแยกให้ดีนะครับ prepend นั้นจะเพิ่มเนื้อหาเข้าไปในส่วนต้นของเนื้อหาเดิม คือจะเพิ่มเนื้อหาเข้าไปข้างใน ส่วน before นั้น จะเพิ่มเนื้อหาเข้าไปข้างหน้าอีลิเม้นท์
ดู Live Demo ดีกว่าครับ ดีว่าอธิบาย 1000 คำ
before(content)
content : (string|selector) พารามิเตอร์จะเป็น string (ปน html) ก็ได้ จะเป็น selector ก็ได้
คำสั่งนี้ ถ้าส่ง string เข้าไปในฟังก์ชั่น มันก็จะเอา 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 before command</title> <script type="text/javascript"> $(document).ready(function(){ $('#before').click(function(){ $('.head').before( '<i>on the fly</i>' ) }); $('#prepend').click(function(){ $('.head').prepend( '<i>on the fly</i>' ) }); }) </script> </head> <body> <h2 class="head">| เนื้อหาของ h2 |</h2> <p> <input type="submit" name="before" id="before" value="Before" /> <input type="submit" name="prepend" id="prepend" value="Prepend" /> </p> </body> </html> |
ในตัวอย่าง นอกจากจะแสดงการใช้งานคำสั่ง before ผมยังแสดงให้เห็นความแตกต่าง ระหว่างคำสั่ง before และ prepend ด้วย
$('#before') $('.head') |
ถ้าท่านสงสัย สองตัวด้านบน ทำไมตัวหนึ่งมี # อีกตัวจึงเป็น . โปรดอ่านบทความนี้ครับ selector ของ jQuery ผมอธิบายไว้ละเอียดแล้ว
Leave a Reply