การทำงานของ after() ก็คือใช้เพิ่มอิลิเมนต์เข้าไปด้านหน้าของทุกอิลิเมนต์ในเซ็ตที่เรากำหนด หรือถ้ามีอิลิเมนต์นั้นอยู่แล้วจะเป็นการย้ายอิลิเมนต์ให้ไปอยู่หน้าเซ็ตที่เรากำหนด มาดูตัวอย่างกัน
ก่อนอื่นสร้าง html ขึ้นมาก่อน
<div class="inner">ทดสอบ 1</div>
<div class="inner">ทดสอบ 2</div>
<div class="inner">ทดสอบ 2</div>
ลองเขียน jQuery ย้ายแท็ก <b> ทั้งหมดไปไว้หน้า .class ที่เรากำหนด
$(".inner").before("<b>Hello</b>");
ลองรันดูจะได้
<b>Hello</b>
<div class="inner">ทดสอบ 1</div>
<b>Hello</b>
<div class="inner">ทดสอบ 2</div>
จากที่อธิบายไว้ในข้างต้นว่า "ถ้ามีอิลิเมนต์นั้นอยู่แล้วจะเป็นการย้ายอิลิเมนต์ให้ไปอยู่หน้าเซ็ตที่เรากำหนด" ถ้ายังไม่เห็นภาพมาดูตัวอย่าง
เรียวแก้ html ใหม่
<b>Hello</b>
<br />.................<br />
<div class="inner">ทดสอบ 1</div>
<div class="inner">ทดสอบ 2</div>
แก้ jQuery ใหม่ ก็คือให้เอาแท็ก b ไปไว้หน้าอิลิเมนต์ที่ใช้คลาสชื่อว่า "inner" นั่นเอง
$(".inner").before($("b"));
ทีนี้ลองรันดูค่ะ
<br />...............<br />
<b>Hello</b>
<div class="inner">ทดสอบ 1</div>
<b>Hello</b>
<div class="inner">ทดสอบ 2</div>
มาประยุกต์อีกซักตัวอย่าง เรียวจะแทรกอิลิเมนต์ตัวที่เป็นคี่อีกแบบและตัวที่เป็นคู่อีกแบบจะเขียนยังไงให้สั้นและกระชับ ถ้าเป็น jQuery ง่ายมาก ๆ
เรียวแก้ html ใหม่เป็น
<div class="inner">ทดสอบ 1</div>
<div class="inner">ทดสอบ 2</div>
<div class="inner">ทดสอบ 3</div>
<div class="inner">ทดสอบ 4</div>
แก้ jQuery ใหม่เป็น
$(".inner").before(function (index) {
if(index % 2 == 0 )
return "<b>Hello</b>";
else
return "<i>Hello</i>";
});
ลองรันดู
<b>Hello</b>
<div class="inner">ทดสอบ 1</div>
<i>Hello</i>
<div class="inner">ทดสอบ 2</div>
<b>Hello</b>
<div class="inner">ทดสอบ 3</div>
<i>Hello</i>
<div class="inner">ทดสอบ 4</div>
จะเห็นว่าเราสามารถส่ง function เ็ป็น parameter ให้กับ Method ใน jQuery ได้
ส่วน index คือลำดับของอิลิเมนต์
ไม่มีความคิดเห็น:
แสดงความคิดเห็น