JQuery : Iterate วนหาข้อมูลแต่ละตัวใน JQuery ด้วย map(), each()

 ดำเนินการดัดแปลงข้อมูล elements ใน wrapped set JQuery

ในบางครั้งบางคราว ถ้าเราต้องการที่จะดึงข้อมูลชุดของ id ในแต่ละ wrapped elements (wrapped
set หรือ wrapped elements หมายถึง ตัว elements ที่ดึงมาได้จาก JQuery ซึ่่งจะถูกห่อหุ้มด้วย
ข้อมูลบางอย่างของ JQuery เลยเรียกว่า wrapped ซึ่งแปลว่าถูกห่อหุ้ม)หรือบางครั้ง เราต้องการที่
จะดึงชุดข้อมูล value ทั้งหมดในแต่ละ element เพื่อที่จะสร้าง query string ใน JQuery วิธีที่จะทำ
ได้แบบนี้มี method ที่เรียกว่า map()

Method syntax: map
map(callback)
คำอธิบาย : Parameter ที่จะส่งเข้าใน method map() เรียกว่าฟังก์ชัน callback ซึ่งจะถูกเรียกทำ
งานทุกๆครั้งในแต่ละ element ใน wrapped set และในฟังก์ชั่น callback นี้มี parameter 2 ตัวซึ่ง
ตัวแรกเป็น index ของ element  ตัวที่สองเป็นตัว element เองซึ่งเราสามารถใช้ this อ้างอิงถึงได้
เหมือนกัน
Returns
method map() จะ return ค่าเป็น wrapped set ของค่าที่ผ่าน method callback แล้ว

ตัวอย่าง code ในตัวอย่างนี้จะดึงข้อมูลค่าของ id ของ image ทั้งใน page แล้วคืนค่ากลับมาเป็น JavaScript array(คืนค่ามาเป็น Javascript array ด้วย method get())

var allIds = $('div').map(function(){
return (this.id==undefined) ? null : this.id;
}).get();

ทำการสำรวจแบบ iterate วนหาดูข้อมูลแต่ละตัว

map() เป็น method มีไว้สำหรับ iterate วนหาข้อมูลแต่ละ elements ของ wrapped set เพื่อที่จะดึงเอาค่า values หรือดัดแปลง elements ไปทางที่เราต้องการ แต่ในบางเหตุการณ์ซึ่งเราต้องการที่จะท่องไปใน elements เพื่อจะทำวิธีการหลายๆอย่าง JQuery ได้จัด method each() เพื่อไว้ทำอย่างนั้นไว้แล้ว

Method syntax: each
each(iterator)
คำอธิบาย : Parameter ที่จะส่งเข้าใน method each() เรียกว่าฟังก์ชัน(function) iterator ซึ่งจะถูกเรียกทำงานทุกๆครั้งในแต่ละ element และในฟังก์ชันนี้มี parameter 2 ตัวซึ่ง
ตัวแรกเป็น index ของ element  ตัวที่สองเป็นตัว element เองซึ่งเราสามารถใช้ this อ้างอิงถึงได้
Returns
คืนค่าเป็น wrapped set ตัวเดิมเพื่อใช้สำหรับการกระทำต่อไปใน JQuery

ตัวอย่างการใช้ method ง่ายๆ เป็นการ set ค่า property ให้กับทุกๆ element ที่ JQuery ดึงข้อมูล match ได้

$('img').each(function(n){
this.alt='This is image['+n+'] with an id of '+this.id;
});

เรียก function สำหรับทุกๆ image element ทั้ง page แล้วแก้ไข alt เพื่อใส่ค่า id เข้าไป

ตัวอย่างเพื่อแสดงว่า each() วนดึงข้อมูลใน arrays ของ JavaScript ได้

$([1,2,3]).each(function(){ alert(this); });

เรียก function เพื่อดึงข้อมูลแต่ละ element ใน array ผ่าน $() และอ้างอิง object ใน arrays ด้วย function ที่เรียกว่า this เมื่อแสดงผลลัพธ์จะ alert ค่าของ DOM(Data Object Model) ของ javascript ออกมาทีละตัว