วิธี after

วิธี after เพิ่มข้อความหลัง องค์ประกอบที่กำหนด นอกจากนี้ยังมีวิธี insertAfter, ซึ่งทำงานในลักษณะเดียวกัน

ไวยากรณ์

แทรกข้อความหลังองค์ประกอบ:

javascript$(ตัวเลือก).after(ข้อความ);

ด้วยวิธีนี้ข้อความที่จะถูกส่งคืนโดยฟังก์ชันที่ผู้ใช้กำหนด จะถูกเพิ่มหลังจากองค์ประกอบที่เลือก ฟังก์ชันถูกเรียกแยกกันสำหรับ แต่ละองค์ประกอบที่เลือก ในพารามิเตอร์แรก ของฟังก์ชันนี้จะได้รับหมายเลขลำดับในชุดของแต่ละ องค์ประกอบที่เลือก (ตามลำดับ) ส่วน พารามิเตอร์ที่สองคือเนื้อหาปัจจุบันขององค์ประกอบ:

javascript$(ตัวเลือก).after(function(หมายเลขในชุด, เนื้อหาปัจจุบันขององค์ประกอบ));

ข้อความอาจไม่ใช่เพียงข้อความธรรมดา แต่ยังเป็นองค์ประกอบ DOM หรือวัตถุ jQuery ได้ด้วย ในกรณีนี้องค์ประกอบเหล่านี้จะถูกย้าย จากตำแหน่งเดิมในโค้ด HTML

ตัวอย่าง

มาเพิ่มข้อความหลังย่อหน้าที่กำหนดกัน:

html<p id="test">text</p>

javascript$('#test').after('!!!');

โค้ด HTML จะมีลักษณะดังนี้:

html<p id="test">text</p>!!!

ตัวอย่าง

มาเพิ่มข้อความพร้อมแท็กหลังย่อหน้าที่กำหนด กัน:

html<p id="test">text</p>

javascript$('#test').after('<p>!!!</p>');

โค้ด HTML จะมีลักษณะดังนี้:

html<p id="test">text</p><p>!!!</p>

ตัวอย่าง

มาย้ายย่อหน้าหนึ่งไปไว้ใต้อีกย่อหน้ากัน (นั่นคือตัดย่อหน้าออกจากตำแหน่งเดิมและ วางในตำแหน่งใหม่):

html<p id="p1">text1</p>
<p id="p2">text2</p>

javascript$('#p1').after('#p2');

โค้ด HTML จะมีลักษณะดังนี้:

html<p id="p2">text2</p>
<p id="p1">text1</p>

ดูเพิ่มเติม