jQuery တွင် each method အသုံးပြုခြင်း

jQuery ဖြင့် ရယူထားသော အစုအဝေး element များ ရှိသောအခါ၊ ကျွန်ုပ်တို့သည် ထိုအရာများတွင် ပြောင်းလဲမှုများ ပြုလုပ်လိုပါက အားလုံးကို တစ်ပြိုင်နက် ပြောင်းလဲရန် ဖြစ်နိုင်ပါသည်။

ဥပမာ၊ ရှာဖွေတွေ့ရှိထားသော စာပိုဒ်အားလုံး၏ စာသားကို ပြောင်းလဲလိုပါက၊ ၎င်းကို ကွဲပြားစေရန် လုပ်ဆောင်နိုင်မည် မဟုတ်ပါ။

ထိုသို့သောအခါ ကျွန်ုပ်တို့ကို အထူး method တစ်ခုဖြစ်သော each က ကူညီနိုင်ပါသည်။ ၎င်းသည် jQuery အစုအဝေးရှိ element အားလုံးအတွက် မည်သည့် function ကိုမဆို သက်ဝင်စေရန် ခွင့်ပြုပေးပါသည်။ ထို function အတွင်း၌ ကျွန်ုပ်တို့သည် element များကို ခွဲခြားပြီး ၎င်းတို့တစ်ခုစီနှင့် မတူညီစွာ ဆောင်ရွက်နိုင်ပါသည်။

အခြေခံအားဖြင့် each သည် loop တစ်ခုဖြစ်ပြီး၊ ၎င်းကို အသုံးပြု၍ ရှာဖွေတွေ့ရှိထားသော element အားလုံးကို ဖြတ်သန်း စစ်ဆေးနိုင်ပါသည်။ လောလောဆယ် loop ဖြတ်သန်းနေသော element အတွက် ညွှန်ပြချက်သည် this တွင် ရှိနေမည်ဖြစ်ပါသည်။

ကျွန်ုပ်တို့သည် ဤ this ကို ယခင်က လုပ်ခဲ့သကဲ့သို့ သန့်ရှင်းသော JavaScript တွင်သာ အသုံးပြုနိုင်ပါသည်။ ဥပမာ၊ ဤသို့ - this.innerHTML - ပြုလုပ်၍ ကျွန်ုပ်တို့၏ element များ၏ အတွင်းပိုင်း အကြောင်းအရာကို ထုတ်ပြနိုင်ပါသည်။ သို့သော် this ကို jQuery dollar ဖြင့် ဤသို့ပတ်ရန် ပိုကောင်းပါသည် - $(this) - ထိုသို့ဆိုလျှင် ၎င်းတွင် jQuery ၏ method များနှင့် ဆက်သွယ်မှုများအားလုံးကို အသုံးပြုနိုင်မည်ဖြစ်ပါသည်။

အောက်ပါ HTML code ကို ကြည့်ရှုကြပါစို့။

<p class="www">စာသား</p>
<p class="www">စာသား</p>
<p class="www">စာသား</p>
<p>စာသား</p>

ဤဥပမာတွင်၊ www class ရှိသော element အားလုံးကို ရယူပြီး ၎င်းတို့၏ အကြောင်းအရာကို စကရင်ပေါ်တွင် ပြသရန် လိုအပ်ပါသည်။ မည်သို့လုပ်ဆောင်ရမည်နည်း။ $('.www') ကို အသုံးပြု၍ ကျွန်ုပ်တို့လိုအပ်သော element များကို ရယူပါမည်။ ထို့နောက် each(test) ကို အသုံးပြု၍ ရယူထားသော element တစ်ခုစီအတွက် test function ကို သက်ဝင်စေပါမည်။ ၎င်းသည် ပထမဆုံး စာပိုဒ်တွင် စတင်၍ သက်ဝင်မည်ဖြစ်ပြီး၊ ထို့နောက် ဒုတိယ၊ တတိယ စသဖြင့် ဆက်လက် သက်ဝင်သွားမည်ဖြစ်သည်။

test function အတွင်း၌၊ this သည် လောလောဆယ် function သက်ဝင်နေသော element ကို ညွှန်ပြမည်ဖြစ်သည် - ပထမဆုံးတွင် ပထမ element ကို ညွှန်ပြပြီး၊ ထို့နောက် ဒုတိယ element ကို ညွှန်ပြမည်ဖြစ်ပြီး ဆက်လက်၍ ဤသို့ပင် ဖြစ်မည်ဖြစ်သည်။ ဤကဲ့သို့သော တည်ဆောက်ပုံ $(this) ကို အသုံးပြု၍ ပုံမှန် JavaScript ၏ this အစား jQuery element ကို ရရှိပြီး ၎င်းတွင် ကျွန်ုပ်တို့၏ element ၏ စာသားကို ရယူမည့် html method ကို အသုံးပြုမည်ဖြစ်သည်။ ထို့နောက် ၎င်းကို စကရင်ပေါ်တွင် ရိုးရိုးရှင်းရှင်း ပြသပေးမည်ဖြစ်သည်။

/*
	function test ၏ အမည်ကို ကိုးကားခြင်း မပါဘဲနှင့် () မပါဘဲ ရေးသားရပါမည်။
	အကြောင်းမှာ ကျွန်ုပ်တို့သည် ၎င်း၏ code ကို လိုအပ်ပြီး ရလဒ်ကို မလိုအပ်ပါ။
*/

$('.www').each(test);

function test() {
	alert($(this).html());
}

ဤလုပ်ဆောင်ချက်အတွက် အမည်မဲ့ function များကိုလည်း အသုံးပြုနိုင်ပါသည် - ဤနည်းကို ပိုမို၍ အများအားဖြင့် အသုံးပြုကြသည်။

$('.www').each(function() {
	alert($(this).html());
});

ထို့အပြင် ကျွန်ုပ်တို့သည် each method သို့ အညွှန်း function တစ်ခုကို parameter များနှင့် ပေးပို့နိုင်ပါသည်။

နောက်ထပ် ဥပမာတစ်ခုတွင် စာမျက်နှာရှိ li အားလုံး၏ အဆုံး၌ ၎င်းတို့၏ အစဉ်လိုက် နံပါတ်များကို ထည့်သွင်းကြပါစို့။ ယခုအခါ ကျွန်ုပ်တို့၏ အမည်မဲ့ function သို့ element ၏ နံပါတ်နှင့် element ကိုယ်တိုင်ကို ပေးပို့သွားမည်ဖြစ်သည်။

$('li').each(function (index, elem) {
	$(elem).append(index);
});

ယခု elem အစား this ကို အသုံးပြုကြပါစို့။

$('li').each(function (index) {
	$(this).append(index);
});

li အားလုံး၏ အကြောင်းအရာကို ၎င်းတို့၏ အစဉ်လိုက် နံပါတ်များအဖြစ် ပြောင်းလဲပါ။