หาค่า Text Content ด้วย Method text() ใน jQuery

วันนี้มาถึงหน้าที่ของเจ้า Method text() กันบ้าง ซึ่งหน้ัาที่ของมันก็คือจะคืนค่าข้อความทั้งหมด (text content) ที่อยู่อิลิเมนต์เซ็ตที่เรากำหนด มาดูตัวอย่างกันดีว่าค่ะ เพื่อให้เข้าใจ

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

<div id="idDiv1">ทดสอบการแสดงข้อความใน div 1</div><br />
<div id="idDiv2">ทดสอบการแสดงข้อความใน div 2</div><br />

ทีนี้ลองใช้ Method text() สำหรับกำหนดข้อความเข้าไปในอิลิเมนต์ก่อน

$(document).ready(function(){
     $("#idDiv1").text("Hello , Welcome to myblog<br />");
});

ลองรันดูจะเห็นว่า text ในอิลิเมนต์ที่มี id="idDiv1" จะเปลี่ยนไปเป็น

<div id="idDiv1">Hello , Welcome to myblog&lt;br /&gt;</div><br />

<div id="idDiv2">ทดสอบการแสดงข้อความใน div 2</div><br />

จะเห็นว่าเครื่องหมาย < จะถูกเปลี่ยนไปเป็น &lt;
และเครื่องหมาย > ก็จะถูกเปลี่ยนไปเป็น &gt;
เพราะว่าถ้าเราใช้ Method text() เมื่อไหร่ แท็ก html จะถูกเปลี่ยนเป็น html code เพื่อให้เวลารันออกบราวเซอร์แบบที่เรากำหนด

ทีนี้เรียวจะดึงค่า text content อยู่ในอิลิเมนต์นั้นออกมาก็ใ้ช้เหมือนเดิมเพียงแต่ไม่ต้องส่ง parameter เข้าไป

var showText = $("div").text();
alert(showText);

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

จะเห็นว่าแสดงเราสามารถดึง text content ในอิลิเมนต์นั้นออกมาได้ไม่ยาก แต่บางคนอาจสงสัยว่าเอ๋แล้วถ้าต้องการให้บราวเซอร์มัน compile html ออกมาด้วยทำยังไง อันนั้น Method html() เป็นพระเอก เอาไว้มาเขียนต่อบทความหน้า

ทีนี้มาเพิ่มเติมอีกหน่อย เราสามารถเขียน function เข้าไปใน Method text() เพื่อลูป Assign ค่าลงอิลิเมนต์หรือแสดงค่าก็ได้เช่น

$("div").text (function ( index,html) {
     if(index % 2 == 0)
     {
          return "คืนค่าข้อความที่ 1";
     }
     else
     {
          return "คืนค่าข้อความที่ 2";
     }
});

ลองรันดูจะเห็นว่า

<div id="idDiv1">Hello , Welcome to myblog&lt;br /&gt;</div><br />

<div id="idDiv2">ทดสอบการแสดงข้อความใน div 2</div><br />

จะถูกเปลี่ยนเป็น

<div id="idDiv1">คืนค่าข้อความที่ 1</div><br />

<div id="idDiv2">คืนค่าข้อความที่ 2</div><br />

จะสังเกตุเห็นว่าใน function มี parameter สองตัวคือ index และ html ซึ่ง index จะได้ค่าเป็น 0 และ 1 ตามลำดับ ส่วน html จะได้ค่า ข้อความอันเก่าของอิลิเมนต์แรกและอิลิเมนต์ที่สองตามลำดับ

10 ตาเห็นไม่เท่าลงมือทำเองนะจ๊ะ