jQuery วนหน้า - map()

jQuery ซับซ้อนคู่มือที่พนัน

ตัวอย่าง

สร้างรายชื่อค่าทั้งหมดในฟอร์ม:

$("p").append($("input").map(function(){}
  return $(this).val();
).get().join(", ") );

ลองทดลองด้วยตัวเอง

การประกาศและการใช้งาน

map() ส่งผลลัพธ์แต่ละองค์ประกอบของชุดที่ตรงกับ jQuery ที่มีค่าที่กลับมา

การใช้งาน

.map(callback(index,domElement))
ตัวอุปกรณ์ คำอธิบาย
callback(index,domElement) ฟังก์ชันสำหรับเรียกใช้งานโดยแต่ละองค์ประกอบของชุดปัจจุบัน

รายละเอียด

เนื่องจากค่าที่กลับมาเป็น array ที่ถูกล็อกด้วย jQuery จึงใช้ get() ในการประมวลผลตัวแปรที่กลับมาเพื่อได้รับ array ธรรมดา

.map() มีประโยชน์มากในการรับหรือตั้งค่าค่าของชุดอิเลเมนต์ โปรดคิดถึงฟอร์มที่มีตัวเลือกเช็คบอกหลายตัว:

<form method="post" action="">
  <fieldset>
    <div>
      <label for="two">2</label>
      <input type="checkbox" value="2" id="two" name="number[]">
    </div>
    <div>
      <label for="four">4</label>
      <input type="checkbox" value="4" id="four" name="number[]">
    </div>
    <div>
      <label for="six">6</label>
      <input type="checkbox" value="6" id="six" name="number[]">
    </div>
    <div>
      <label for="eight">8</label>
      <input type="checkbox" value="8" id="eight" name="number[]">
    </div>
  </fieldset>
</form>

เราสามารถได้รับรายชื่อ ID ของตัวเลือกเช็คบอกที่แยกด้วยคำหยาบ:

$(':checkbox').map(function() {
  return this.id;
).get().join(',');

ลองทดลองด้วยตัวเอง

ผลลัพธ์ของการเรียกใช้ครั้งนี้คือตัวเขียนภาษาไทย: "two,four,six,eight"

ในฟังก์ชัน callback ซึ่งนำเสนอ ตัวอนุมาน this ใช้ในแต่ละการวนลูปของ DOM อิเลเมนต์ปัจจุบัน。ฟังก์ชันนี้สามารถนำกลับข้อมูลบางอย่าง หรือตัวแปรที่ต้องการที่จะแทรกเข้าสู่ชุดข้อมูลที่กำลังนำมาตั้งค่าเข้าสู่ผลลัพธ์ หากกลับมาเป็นตัวแปรแบบ array สมาชิกของตัวแปรนี้จะถูกแทรกเข้าสู่ชุดข้อมูล หากฟังก์ชันกลับมาเป็น null หรือ undefined จะไม่มีการแทรกสมาชิกใดๆ

jQuery ซับซ้อนคู่มือที่พนัน