แทรก content ด้วย Method after() ใน jQuery

วันนี้มาแนะนำ Method อีกตัวคือ after() จากที่เรียวได้ลองเกิดข้อสงสัยว่าเอาเจ้า Method ตัวนี้มันต่างกับ insertAfter() ยังไง ที่เข้าใจก็คือเขียน syntax ต่างกันแต่ลองใช้แล้วก็เหมือน ๆ กันนั่นหละ ใครมีความคิดเห็นก็ comment ไว้หน่อยนะคะเป็นความรู้ว่าม้ันใช้ต่างกันยังไงอีก

อะก่อนอื่นมาลองกัน สร้างอิลิเมนต์ขึ้นมาก่อน

<div class="inner">ทดสอบ 1</div>
<div class="inner">ทดสอบ 2</div>

ทีนี้มาเขียน jQuery เรียวต้องการเพิ่มแท็กเข้าไปต่อ

$(document).ready(function(){
    $('.inner').after('<b>ข้อมูลที่ถูกเพิ่มเข้าไป</b>');
});

ทีนี้ลองรันดู

<div class="inner">ทดสอบ 1</div>
<b>ข้อมูลที่ถูกเพิ่มเข้าไป</b>
<div class="inner">ทดสอบ 2</div>
<b>ข้อมูลที่ถูกเพิ่มเข้าไป</b>

จะเห็นว่าแท็กที่เรากำหนดจะถูกเพิ่มเข้าไปหลัง selector ที่เราเขียนซึ่งต่างกับ insertAfter
ถ้าเป็น insertAfter ต้องเขียนแบบนี้

$("<b>ข้อมูลที่ถูกเพิ่มเข้าไป</b>").insertAfter(".inner");

เห็นมะแล้วมันต่างกันไง ที่เข้าใจตอนนี้คือมันเขียนไม่เหมือนกัน = ="

มาดูอีกตัวอย่างหนึ่งเรียวต้องการเพิ่ม content เข้าไป selector ที่กำหนดแต่ว่าแต่ละ content จะทีเ่พิ่มเข้าไปจะไม่เหมือนกันเช่น ต้องการเพิ่มเข้าไปที่ div แรกอีกอย่าง div ที่สองอีกอย่างจะเขียนอย่างไร

<div class="inner">ทดสอบ 1</div>
<div class="inner">ทดสอบ 2</div>

$(document).ready(function() {
    $("div").after (function(index) {
            if ( index % 2 == 0 )
            {
                return "<b>Hello</b>";
            }
            else
            {
                return "<i>Hello</i>";
            }
    });
});

ลองรันดู

<div class="inner">ทดสอบ 1</div>
<b>Hello</b>
<div class="inner">ทดสอบ 2</div>
<i>Hello</i>

จะเห็นว่าเรียวกำหนดให้ div อันที่มีการ mod ด้วย 2 เท่ากับ 0 (ก็คือ div ตัวแรก) ให้แทรก <b>Hello</b> ต่อท้าย
ถ้าไม่ใช่ให้แทรก <i>Hello</i> ต่อท้าย