jQuery හි each ක්‍රමය සමඟ වැඩ කිරීම

jQuery භාවිතයෙන් ලබාගත් මූලද්‍රව්‍ය සමූහයක් අප සතුව ඇති විට, අපට ඒවායේ වෙනස්කම් සිදු කළ හැක්කේ සියලුම මූලද්‍රව්‍ය සඳහා එකවර පමණි.

උදාහරණයක් ලෙස, සොයාගත් සියලු චේදවල පෙළ වෙනස් කිරීමට අපට අවශ්‍ය නම් - එය වෙනස් කිරීමට අපට හැකි නොවේ.

මෙම අවස්ථාවේදී, පිටපත් කිරීමට අපට උපකාරී වන්නේ විශේෂ each ක්‍රමයයි, එය jQuery කට්ටලයේ සියලුම මූලද්‍රව්‍ය සඳහා යම් ශ්‍රිතයක් යොදන්නට ඉඩ සලසයි. මෙම ශ්‍රිතය තුළ අපට මූලද්‍රව්‍ය වෙන් කර ඒවායින් එක් එක් සමඟ වෙනස් ලෙස හැසිරිය හැකිය.

අත්‍යවශ්‍යයෙන්ම each යනු චක්‍රයක් වන අතර, එහි උපකාරයෙන් සොයාගත් සියලුම මූලද්‍රව්‍ය හරහා ගමන් කළ හැකිය. දැන් චක්‍රය හරහා යන මූලද්‍රව්‍යය වෙත සබැඳිය this හි පවතී.

අපට මෙම this සරල JavaScript ලෙස භාවිතා කළ හැකිය, අපි කලින් කළ පරිදි, උදාහරණයක් ලෙස, මේ ආකාරයෙන් - this.innerHTML - සහ අපගේ මූලද්‍රව්යවල අභ්‍යන්තර අන්තර්ගතය නිම කරන්න. නමුත් this jQuery ඩොලරයකින් මෙසේ ඔබ්බට යැවීම වඩා හොඳය - $(this) - මෙම අවස්ථාවේ දී අපට එයට jQuery හි සියලු ක්‍රම සහ දාම යොදන්නට හැකිය.

පහත HTML කේතය සලකා බලමු:

<p class="www">පෙළ</p>
<p class="www">පෙළ</p>
<p class="www">පෙළ</p>
<p>පෙළ</p>

මෙම උදාහරණයේ දී, අපට www පන්තිය සහිත සියලුම මූලද්‍රව්‍ය ලබා ගෙන තිරය මත ඒවායේ අන්තර්ගතය නිම කළ යුතුය. එය කරන ආකාරය: $('.www') භාවිතයෙන් අපට අවශ්‍ය මූලද්‍රව්‍ය ලැබේ, ඉන්පසු each(test) භාවිතයෙන් අපි ලබාගත් සෑම මූලද්‍රව්‍යයකටම test ශ්‍රිතය යොදන්නෙමු. එය පළමුව චේදයට යොදනු ලැබේ, ඉන්පසු දෙවන, තෙවන සහ එසේම යනාදිය.

ශ්‍රිතය තුළ this මගින් test ශ්‍රිතය යොදනු ලබන මූලද්‍රව්‍යය වෙත යොමු කරයි - පළමුවෙන් මෙය පළමු මූලද්‍රව්‍යය වනු ඇත, ඉන්පසු දෙවැන්න, සහ එසේම යනාදිය. මෙවැනි කොන්ස්ට්රක්ෂන් එකක් $(this) භාවිතා කිරීමෙන් අපි සාමාන්‍ය this වෙනුවට JavaScript වලින් jQuery මූලද්‍රව්‍යයක් ලබා ගනිමු සහ එයට html ක්‍රමය යොදන්නෙමු, එය අපගේ මූලද්‍රව්‍යයේ පෙළ ලබා ගනී. හොඳයි, ඊට පසුව එය සරලව තිරය මත නිම කරනු ලැබේ:

/*
	test ශ්‍රිතයේ නම උපුටා දැක්වීම් ලකුණු නොමැතිව සහ () නොමැතිව ලියන්න,
	අපට එහි ප්‍රතිඵලය නොව කේතය අවශ්‍ය නිසා:
*/

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

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

මෙම කාර්යය විසඳීම සඳහා නිර්නාමික ශ්‍රිත ද යොදා ගත හැකිය - මෙය බොහෝ විට කරනු ලබයි:

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

එසේම අපට each ක්‍රමයට පරාමිති සහිත callback-ශ්‍රිතය සම්ප්‍රේෂණය කළ හැකිය.

පහත උදාහරණයේ දී අපි අවසානයට පිටුවේ ඇති සියලුම li වලට ඒවායේ අනුක්‍රමික අංකය එකතු කරමු. දැන් අපගේ නිර්නාමික ශ්‍රිතයට අපි මූලද්‍රව්‍යයේ අංකය සහ මූලද්‍රව්‍යයම සම්ප්‍රේෂණය කරන්නෙමු:

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

දැන් elem වෙනුවට this භාවිතා කරමු:

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

සියලුම li වල අන්තර්ගතය ඒවායේ අනුක්‍රමික අංකය වෙනස් කරන්න.