jQuery கடந்து செல்லும் விதத்தை பின்வரும் இரண்டு நிலைகளில் வரையறுக்கலாம்.
- jQuery Object-ஆக வரையறுக்கப்பட்டுள்ளவற்றுக்குள் கடந்து செல்லல்
- jQuery Object-ஆக வரையறுக்கப்பட்டுள்ளவற்றின் உட்செய்திகளாக இருப்பவற்றுக்குள் கடந்து செல்லல்
இந்த இரண்டிற்கும் each() எனும் method பயன்படுகிறது.
jQuery Object-ஆக வரையறுக்கப்பட்டுள்ளவற்றுக்குள் கடந்து செல்லல்:
சாதாரணமாக jQuery object என்றழைக்கப்படும் $(“p”) என்பது வலைத்தளப்பக்கத்தில் உள்ள ஒவ்வொரு <p> -ஐயும் கடந்து சென்று நமக்கு வேண்டிய மாற்றங்களை நிகழ்த்தும். அவ்வாறு கடந்து செல்லும்போது நமது விருப்பத்திற்கேற்ப, ஒருசில <p>-ஐத் தவிர்த்து ஒருசில <p>-ஐ மட்டும் மாற்றுவது எப்படி என்று இந்தப் பகுதியில் பார்க்கப் போகிறோம். கீழ்க்கண்ட எடுத்துக்காட்டில் அனைத்து <p>-ன் மீதும் மாற்றங்களை நிகழ்த்தாமல் ஒரு குறிப்பிட்ட நிறத்தில் உள்ள <p>-ஐ மட்டும் சிகப்பு நிறத்தில் மாற்றம் செய்வதற்கான நிரல் கொடுக்கப்பட்டுள்ளது.
$(“p”).each (function (index,element)
{if ($(element).css (“color”) === “rgb(0, 191, 255)”)
{$(element).css (“color”,”rgb(255, 0, 0)”);}
});
$(“p”) என்பது jquery-ஐ அனைத்து <p>-ன் வழியே நடத்திச் செல்லும். $(“p”).each() {…..} என்பது அந்த இயக்கத்தை வெளிப்படையாகக் குறிப்பிட்டு, ஒவ்வொரு இயக்கத்திலும் சோதனையை நிகழ்த்தும். இதற்குள் ஒரு function() {…..} கொடுக்கப்பட்டுள்ளது. அது index,element எனும் இரண்டு parameters-ஐக் கொண்டுள்ளது. Index-என்பது அடுத்தடுத்த சுழற்சியையும், element என்பது அந்தந்த சுழற்சியில் உள்ள <p> -ஐயும் குறிக்கிறது. இந்த function()-க்குள் வரையறுக்கப்பட்டுள்ள if-ஆனது ஊதா நிறத்தில் உள்ள <p>-ஐ மட்டும் சிவப்பு நிறத்தில் மாற்ற உதவும் சோதனையை நிகழ்த்துகிறது. எனவேதான் ஊதா நிறத்தில் உள்ள “Doing the right things at right time” என்பது சிவப்பு நிறத்தில் மாறியுள்ளது. இவ்வாறாக jQuery object-ஆனது அதன் elements வழியே இயங்கிச் செல்லும் விதத்தை நம்மால் கட்டுப்படுத்தவோ, மாற்றவோ முடியும்.
jQuery Object-ஆக வரையறுக்கப்பட்டுள்ளவற்றின் கீழ் உள்ளவற்றுக்குள் கடந்து செல்லல்:
சில சமயங்களில் jQuery object-ஆனது Ordered list, Unordered list போன்றவையாக இருப்பின், அதன் கீழ் வரையறுக்கப்பட்டுள்ள விஷயங்களுக்குள் ஒவ்வொன்றாகச் சென்று ஒவ்வொரு விதமான மாற்றங்களை நிகழ்த்துவது எப்படி என்று இங்கு பார்க்கலாம்.
$(“#beverages”).attr (“type”,”circle”) என்பது beverages எனும் id-ஐக் கொண்ட unordered list-ன் கீழ் உள்ள அனைத்தையும் வட்டவடிவத்தை முன்னிறுத்தி வரிசைப்படுத்துகிறது. இதற்கு each() என்பது தேவையில்லை. ஆனால் இவை அனைத்தையும் 1.2.3 எனும் எண்களின் அடிப்படையில் வரிசைப்படுத்தப்பட வேண்டுமெனில் அதற்கு each() என்பது பின்வருமாறு பயன்படும்.
$(“#beverages”).children().each ( function(i,x) {$(x).text((i+1)+”.”+$(x).text());} );
மேலும் $(“li:first-child”) என்பது <li> -ல் முதலாவதாக வரையறுக்கப்பட்டுள்ளவற்றிலும், $(“li:first-child”).next() என்பது இரண்டாவதாக வரையறுக்கப்பட்டுள்ளவற்றிலும், $(“li:first-child”).siblings() என்பது முதலாவதை விட்டுவிட்டு அதன்கீழ் உள்ள அனைத்திலும், நாம் குறிப்பிட்டுள்ள மாற்றங்களைச் செய்துள்ளது. இவ்வாறாக jQuery object-ன் கீழ் உள்ளவற்றில் நம்மால் மாற்றங்களைச் செய்ய முடியும்.
இவை அனைத்தையும் உள்ளடக்கிய ஒரு எடுத்துக்காட்டு கீழே கொடுக்கப்பட்டுள்ளது.
சாதாரண வெளிப்பாடு:
Desired Changes-ஐ சொடுக்கினால் ஏற்படும் மாற்றம்:
