jQuery แต่ละ () ทำงานอย่างไร

jQuery each() เป็นวิธีที่กระชับในการวนซ้ำองค์ประกอบ DOM each() เมธอดได้รับการออกแบบให้เรียกใช้บนวัตถุ jQuery เป้าหมาย ออบเจ็กต์ jQuery เป็นอ็อบเจ็กต์ที่มีองค์ประกอบ DOM ตั้งแต่หนึ่งรายการขึ้นไป และมีสิทธิ์เข้าถึงเมธอด jQuery ไม่ใช่แค่ each() มีแนวโน้มที่จะเกิดข้อผิดพลาดน้อยลง ทำให้การจัดการองค์ประกอบ DOM หลายรายการง่ายขึ้น

jQuery each() ต้องใช้ฟังก์ชันเรียกกลับ ซึ่งเป็นฟังก์ชันที่ส่งผ่านไปยังฟังก์ชันอื่นที่จะดำเนินการในภายหลัง ภายในฟังก์ชันเรียกกลับคือการเข้าถึงหมายเลขดัชนีขององค์ประกอบและองค์ประกอบเอง สามารถดูการตรวจสอบฟังก์ชันการโทรกลับที่ครอบคลุมมากขึ้นได้ที่นี่

การประยุกต์ใช้ each() ตรงไปตรงมาเหมือนกับลูป JavaScript แต่มีบางจุดที่อาจเกิดความสับสนได้ เราจะเคลียร์ประเด็นเหล่านี้รวมถึงการดูไวยากรณ์ ที่ส่วนท้ายของคู่มือนี้จะมีตัวอย่างโค้ดทีละขั้นตอนเพื่อดูวิธีต่างๆ ในการใช้ jQuery each() .

jQuery each() คืออะไร

jQuery แต่ละวิธีเป็นวิธีการวนซ้ำสำหรับไลบรารี jQuery มันทำงานเหมือน JavaScript วนซ้ำโดยวนซ้ำองค์ประกอบ DOM jQuery each() ต้องมีฟังก์ชันเรียกกลับ และภายในฟังก์ชันเรียกกลับเป็นที่ที่องค์ประกอบ DOM สามารถจัดการได้

ในขณะที่อยู่ภายในเนื้อหาของฟังก์ชันเรียกกลับ คำสั่งเงื่อนไขสามารถใช้เพื่อเปลี่ยนองค์ประกอบที่เลือกบางส่วนได้ คำสั่งแบบมีเงื่อนไขคือ if...then คำสั่งใน JavaScript ซึ่งจะให้ระดับการควบคุมที่ลึกซึ้งยิ่งขึ้นว่าองค์ประกอบต่างๆ จะเปลี่ยนแปลงไปอย่างไร

jQuery แต่ละ () ไวยากรณ์

jQuery แต่ละอันสามารถเรียกใช้ได้สองวิธี ขั้นแรกเป็นวิธีการที่เรียกว่าองค์ประกอบที่เลือก ฟังก์ชันเรียกกลับยอมรับอาร์กิวเมนต์ที่เป็นทางเลือกสูงสุดสองอาร์กิวเมนต์:ดัชนีและค่า ดัชนีคือหมายเลขดัชนีขององค์ประกอบปัจจุบัน หากองค์ประกอบปัจจุบันเป็นองค์ประกอบแรกในรายการ หมายเลขดัชนีจะส่งกลับ 0

อาร์กิวเมนต์ค่าหมายถึงองค์ประกอบปัจจุบัน สิ่งสำคัญคือต้องสังเกตว่าการโยงเมธอดกับค่านั้นจำเป็นต้องมีการตัดค่าในตัวเลือก jQuery มาใส่ทั้งหมดนี้ลงในโค้ดนามธรรมเพื่อให้เราสามารถแยกย่อยไวยากรณ์ได้

$('div').each((index, value) => {
  console.log(`${index}: ${$(value).text()}`)
})

ที่นี่ เรากำลังเลือก

$('div').each(function() {
  alert($(this).text())
})

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

$('.colorSelect').each((index, value) => {
  console.log($(value).text())
})

$('.colorSelect').each(function() {
   console.log($(this).text())
})

<div class="colorSelect">Red</div>
<div>Pink</div>
<div class="color">Orange</div>
<div class="colorSelect">Purple</div>
<div class="colorSelect">Blue</div>

<div class='result'>

</div>

<style>
  .colorSelect {
    color: blue;
  }
  
  .green {
    color: green;
  }
</style>