٢-٣- مدیریت مجموعه انتخاب شده
هز زمان که مجموعه ای از عناصر انتخاب انتخاب میشوند، خواه این عناصر از طریق انتخاب کنندهها انتخاب شده باشند و یا تابع ()$ در صدد ایجاد آن باشد، مجموعه ای در اختیار داریم که آماده دستکاری و اعمال تغییر با استفاده از متدهای jQuery میباشد. این متدها را در پستهای آتی بررسی خواهیم کرد. اما اکنون به این نکته میپردازیم که اگر بخواهیم از همین مجموعه انتخاب شده زیر مجموعه ای ایجاد کنیم و یا حتی آن را گسترش دهیم، چه باید کرد؟ به طور کلی در این پست پیرامون این مورد بحث خواهد شد که چگونه میتوانیم مجموعه انتخاب شده را به آن صورت که میخواهیم بهیود دهیم.
برای درک مطالبی که قصد توضیح آنها را در این قسمت داریم، یک صفحه کارگاهی دیگر نیز در فایل قابل دانلود این کتاب موجود میباشد که با نام chapter2/lab.wrapped.set.html قابل دسترسی میباشد. نکته مهم در مورد این صفحه کارگاهی آن است که میبایست عبارات و دستورهای کامل را با ساختار صحیح وارد کنیم در غیر این اینصورت این صفحه کاربردی نخواهد داشت.
٢-٣-١-تعیین اندازه یک مجموعه عناصر
قبلا اشاره کردیم که مجموعه عناصر jQuery شباهت هایی با آرایه دارد. یکی از این شباهتها داشتن ویژگی length میباشد که مانند آراه در جاوااسکریپت ، تعداد عناصر موجود در مجموعه را شامل میشود.
افزون بر این ویژگی، jQueryیک متد را نیز معرفی کرده است که دقیقا شبیه به length عمل میکند. این متد ()size میباشد که استفاده از آن را در مثال زیر مشاهده میکنید.
$('#someDiv') .html('There are '+$('a').size()+' link(s) on this page.');
()size
تعداد عناصر موجود در مجموعه را محاسبه میکند
پارامترها
بدون پارامتر
خروجی
تعداد عناصر مجموعه
٢-٣-٢-بکارگیری عنصرهای مجموعه
به طور معمول پس از انتخاب یک مجموعه با استفاده از متدهای jQuery، عملی را بروی آن عناصر انتخاب شده انجام میدهیم، مانند مخفی کردن آنها با متد ()hide، اما گاهی اوقات میخواهیم بروی یک یا چند مورد خاص از عناصر انتخاب شده عملی را اعمال کنیم. jQuery چند روش مختلف را به منظور اینکار ارایه میدهد.
از آنجا که مجموعه عناصر انتخاب شده در jQuery مانند آرایه در جاوااسکریپت میباشد، بنابراین به سادگی میتوانیم از اندیس برای دستیابی به عناصر مختلف مجموعه استفاده کنیم. برای مثال به منظور دسترسی به اولین عکس از مجموعه عکسهای انتخاب شده که دارای صفت alt میباشند از دستور زیر استفاده میکنیم:
$('img[alt]')[0]
دستور زیر مانند دستور قبلی عمل میکند:(get(index
برای واکشی یک یا تمام عناصر موجود در مجموعه استفاده میشود. اگر برای این متد پارامتری ارسال نشود، تمام عناصر را در قالب یک آرایه جاوااسکریپت بر میگرداند، اما در صورت ارسال یک پارامتر، تنها آن عنصر را بر میگرداند.
پارامتر
شماره اندیس یک عنصر که میبایست یک مقدار عددی باشد.
خروجی
یک یا آرایه ای از عناصر
$('img[alt]').get(0)
var allLabeledButtons = $('label+button').get();
در متد ()get دیدیم که با دریافت شماره اندیس یک عنصر، آن عنصر را برای ما برمی گرداند، عکس این عمل نیز امکان پذیر میباشد. فرض کنید میخواهیم از میان تمام عناصر عکس، شماره اندیس عکسی با شناسه findMe را بدست آوریم. برای این منظور میتوانیم از کد زیر بهره ببریم:
var n = $('img').index($('img#findMe')[0]);
(index(element
عنصر ارسالی را در مجموعه عناصر پیدا میکند، سپس شماره اندیس ان را بر میگرداند. اگر چنین عنصری در مجموعه یافت نشد خروجی 1- خواهد بود.
پارامتر
پارامتر این متد میتواند یک عنصر و یا یک انتخاب کننده باشد که خروجی انتخاب کننده نیز در نهایت یک عنصر خواهد بود.
خروجی
شماره اندیس عنصر در مجموعه
٢-٣-٣-برش و کوچک کردن مجموعه ها
ممکن است شرایطی پیش آید که پس از بدست آوردن یک مجموعه عناصر انتخاب شده نیاز باشد که عنصری به آن مجموعه اضافه و یا حتی عنصری را از آن حذف کنیم تا در نهایت مجموعه ای باب میل ما بدست آید. برای انجام چنین تغییرهایی در یک مجموعه jQuery کلکسیون بزرگی از متدها را برای ما به همراه دارد. اولین موردی که به آن میپردازیم، افزودن یک عنصر به مجموعه میباشد.
اضافه کردن عناصر بیشتر به یک مجموعه عنصر انتخاب شده
همواره ممکن است شرایطی پیش آید که پس از ایجاد یک مجموعه عناصر انتخاب شده، بخواهیم عنصری را به آن اضافه کنیم. یکی از دلایلی که باعث میشود این امر در jQuery بیشتر مورد نیاز باشد توانایی استفاده از متدهای زنجیره ای در jQuery است.
ابتدا یک مثال ساده را بررسی میکنیم. فرض کنید میخواهیم تمام عناصر عکس که دارای یکی از دو خصوصیت alt و یا title میباشند را انتخاب کنیم، با استفاده از انتخاب کنندههای قدرتمند jQuery دستوری مانند زیر خواهیم نوشت:
$('img[alt],img[title]')
$('img[alt]').add('img[title]')
ساختار کلی متد ()add به صورت زیر است:
َ(add(expressionاصلاح عناصر یک مجموعه عنصر انتخاب شده
ابتدا یک کپی از مجموعه انتخاب شده ایجاد میکند، سپس با افزودن محتویات پارامتر expression به آن نمونه، یک مجموعه جدید تشکیل میدهد. پارامتر expression میتواند حاوی یک انتخاب کننده، قطعه کد HTML، یک عنصر و یا آرایه ای از عناصر باشد.
پارامتر
در این پارامتر مواردی (مانند رشته، آرایه، المان) که میخواهیم به مجموعه عناصر انتخاب شده اضافه شوند قرار میگیرد. که میتواند انتخاب کننده، قطعه کد HTML، یک عنصر و یا ارایه ای از عناصر باشد.
خروجی
یک کپی از مجموعه اصلی به علاوه موارد اضافه شده.
در قسمت قبل دیدیم که چگونه با استفاده از متد ()add و با بکار گیری آن در توابع زنجیره ای، توانستیم عناصری جدید به مجموعه انتخاب شده اضافه کنیم. عکس این عمل را نیز میتوان با ستفاده از متد ()not در توابع زنجیره ای انجام داد. این متد عملکرید شبیه به فیلتر not: دارد، اما با این تفاوت که بکار گیری آن مانند متد ()add میباشد و میتوان در هر جایی از زنجیره از آن استفاده کرد تا عناصر مورد نظر را از مجموعه انتخاب شده حذف کنیم.
فرض کنید میخواهیم تمامی عناصر عکسی را که دارای خصوصیت title میباشند به استثنای آن موردی که واژه puppy در مقدار مربوط به این صفت استفاده کرده اند را انتخاب کنیم. این کار به سادگی و با استفاده از دستوری مانند([ "img[title]:not([title*="puppy میتوان انجام داد. اما برای آن که مثالی از چگونگی کار متد ()not ببینید، این کار را به شکل زیر انجام میدهیم:
$('img[title]').not('[title*=puppy]')
شکل کلی متد ()not مانند زیر است:
(not(expressionاین شیوه برای ایجاد مجموعه هایی که انتخاب کنندهها قادر به ساخت آنها نمیباشند، کاربرد بسیار مناسبی دارد، زیرا از تکنیکهای برنامه نویسی استفاده میکند و دست ما را برای اعمال انتخابهای گوناگون باز میکند.
ابتدا یک کپی از مجموعه انتخاب شده ایجاد میکند، سپس از آن کپی عناصری را که expression مشخص میکند را حذف مینماید.
پارامتر
این پارامتر تعیین کننده عناصر در نظر گرفته شده برای حذف میباشد. این پارامتر میتواند یک عنصر، ارایه ای از عناصر، انتخاب کننده و یا یک تابع باشد.
اگر این پارامتر تابع باشد، تک تک عناصر مجموعه به آن ارسال میشوند و هر یک که خروجی تابع را برابر با مقدار true کند، حذف میشود.
خروجی
یک کپی از مجموعه اصلی بدون موارد حذف شده.
اگر در شرایطی خاص با حالتی روبرو شدید که احساس کردید عکس این انتخاب برای شما کارایی دارد، باز میتوانید از یکی دیگر از متدهای jQuery استفاده کنید، متد ()filter عملکردی مشابه با متد ()not دارد با این تفاوت که عناصری از مجموعه حذف میشوند که خروجی تابع را false کنند.
فرض کنید میخواهیم تمام عناصر td که دارای یک عنصر عددی میباشند را انتخاب کنیم. با وجود قدرت فوق العاده انتخاب کنندههای jQuery به ما ارایه میدهند، انجام چنین کاری با استفاده از انتخاب کنندهها غیر ممکن است. در این حالت از متد ()filter را به شکل زیر استفاده میکنیم:
$('td').filter(function(){return this.innerHTML.match(/^\d+$/)})
شکل کلی متد ()filter به شکل زیر است.
(filter(expressionایجاد یک زیر مجموعه از مجموعه عناصر انتخاب شده
ابتدا یک کپی از مجموعه انتخاب شده ایجاد میکند، سپس از آن کپی عناصری را که expression مشخص میکند را حذف مینماید.
پارامتر
این پارامتر تعیین کننده عناصر در نظر گرفته شده برای حذف میباشد. این پارامتر میتواند یک عنصر، ارایه ای از عناصر، انتخاب کننده و یا یک تابع باشد.
اگر این پارامتر تابع باشد، تک تک عناصر مجموعه به آن ارسال میشوند و هر یک که خروجی تابع را برابر با مقدار false کند، حذف میشود.
خروجی
یک کپی از مجموعه اصلی بدون عناصر حذف شده.
گاهی اوقات داشتن یک زیر مجموعه از عناصر یک مجموعه، چیزی است که دنبال آن هستیم. برای این منظور jQuery متد ()slice را ارایه میکند که عناصر را بر اساس جایگاه آنها به زیر مجموعه هایی کوچکتر تقسیم میکند. نتیجه استفاده از این متد یک مجموعه جدید برگرفته از تعدادی عناصر پشت سر هم،از یک مجموعه انتخاب شده خواهد بود:
شکل کلی متد ()slice مانند زیر است:
(slice(begin, endاگر بخواهیم از یک مجموعه کلی، تنها یک عنصر را در قالب یک مجموعه انتخاب کنیم میتوانیم از متد ()slice استفاده کنیم و مکان آن عنصر در مجموعه را به آن ارسال کنیم. دستور زیر مثالی از این حالت میباشد:
ایجاد و برگرداندن یک مجموعه جدید از بخشی از عناصر پشت سر هم در یک مجموعه اصلی.
پارامتر
begin: پارامتر begin که یک پارامتر عددی میباشد و مقدار اولیه آن از صفر آغاز میشود، نشان دهنده اولین عنصری است که میخواهیم در مجموعه جدید حضور داشته باشد.
end: پارامتر دوم که آن هم یک پارامتر عددی میباشد و از صفر آغاز میشود، در این متد اختیاری است. این پارامتر اولین عنصری است که نمیخواهیم از آن به بعد در مجموعه جدید حضور داشته باشد را مشخص میکند. اگر مقداری برای این پارامتر ننویسیم، به صورت پیش فرض تا انتهای مجموعه انتخاب میشود.
خروجی
یک مجموعه عنصر جدید.
$('*').slice(2,3);
از همین رو دستور زیر باعث ایجاد یک مجموعه که شامل چهار عنصر اولیه صفحه میباشد، میشود.
$('*').slice(0,4);
$('*').slice(4);
٢-٣-٤-ایجاد مجموعه بر اساس روابط
jQuery به ما این توانایی را داده است تا مجموعه هایی را انتخاب کنیم، که اساس انتخاب عناصر، رابطه سلسله مراتبی آنها با عناصر HTML صفحه باشد. اکثر این متدها یک پارامتر اختیاری از نوع انتخاب کننده دریافت میکنند که میتواند برای انتخاب عناصر مجموعه استفاده شود. در صورتی که چنین پارامتری ارسال نگردد، تمام عناصر واجد شرایط متد در مجموعه انتخاب میشوند.
توضیح | متد |
مجموعه ای را برمی گرداند که شامل تمام فرزندان بدون تکرار از عناصر مجموعه میباشد. | () children |
مجموعه ای شامل محتویات تمام عناصر برمی گرداند. (از این متد معمولا برای عناصر iframe استفاده میشود) | () contents |
مجموعه ای شامل فرزندان پدرش که بعد از خود این عنصر میباشند را برمی گرداند. این مجموعه عنصر تکراری ندارد. | () next |
مجموعه ای شامل تمام فرزندان پدرش که بعد از خود این عنصر میباشند را بر میگرداند. | () nextAll |
مجموعه ای شامل نزدیکترین پدر اولین عنصر مجموعه را بر میگرداند. | () parent |
مجموعه ای شامل تمام پدران مستقیم عناصر مجموعه را بر میگرداند. این مجموعه عنصر تکراری ندارد. | () parents |
مجموعه ای شامل فرزندان پدرش که قبل از خود این عنصر میباشند را برمی گرداند. این مجموعه عنصر تکراری ندارد. | () prev |
مجموعه ای شامل تمام فرزندان پدرش که قبل از خود این عنصر میباشند را بر میگرداند. | () prevAll |
مجموعه ای بدون عنصر تکراری را بر میگرداند که شامل تمام فرزندان پدر خود عنصر خواهد بود. | () siblings |
٢-٣-٥-استفاده از مجموعههای انتخاب شده برای انتخاب عناصر
با وجود اینکه تاکنون با شمار زیادی از تواناییهای انتخاب و انتخاب کنندهها در jQuery آشنا شده اید، هنوز چند مورد دیگر نیز برای افزایش قدرت انتخاب باقی مانده است.
متد ()find بروی یک مجموعه عناصر انتخاب شده به کار گرفته میشود و یک پارامتر ورودی نیز دارد. این پارامتر که یک انتخاب کننده است تنها بروی فرزندان این مجموعه اعمال میشود. برای مثال فرض کنید یک مجموعه از عناصر انتخاب و در متغیر wrapperSet قرار گرفته است. با دستور زیر میتوانیم تمام عناصر (تگ) cite را که درون یک تگ p قرار گرفته اند را انتخاب کنیم، به شرطی که آنها فرزندان عناصر مجموعه wrapperSet باشند:
wrappedSet.find('p cite')
$('p cite', wrapperSet)
شکل کلی متد ()findمانند زیر است:
(find(selectorجهت پیدا کردن عناصری که داخل یک wrapperSet میتوانیم از متد دیگری به نام ()contains نیز استفاده کنیم. این متد مجموعه ای را بر میگرداند که شامل تمام عناصری است که در انتخاب کننده پارامتر ورودی است. مثلا
یک مجموعه عنصر جدید ایجاد میکند که شامل فرزندان عناصر مجموعه قبل میشود.
پارامتر
یک انتخاب کننده است که در قالب یک رشته به این متد ارسال میشود.
خروجی
یک مجموعه عنصر جدید
$('p').contains('Lorem ipsum')
(contains(textآخرین متدی که به بررسی آن میپردازیم متد ()is میباشد. با استفاده از این متد میتوانیم اطمینان حاصل کنیم که دست کم یک عنصر از مجموعه عناصر، شرایط مشخص شده توسط ما را دارا باشد. یک انتخاب کننده به این متد ارسال میشود، اگر عنصری از مجموعه عناصر انتخاب شد، خروجی متد true میشود و در غیر این صورت مقدار false بر گردانده خواهد شد. برای مثال:
مجموعه ای از عناصر که شامل متن ورودی میباشند را بر میگرداند.
پارامتر
رشته ورودی که میخواهیم در عنصر فراخوان متد جستجو شود.
خروجی
مجموعه ای از عناصر از نوع فراخوان متد را بر میگرداند که شامل متن ورودی باشد.
var hasImage = $('*').is('img');
قالب کلی متد ()is مانند زیر است:
(is(selector
بررسی میکند که آیا عنصری در مجموعه وجود دارد که انتخاب کننده ارسالی آن را انتخاب کند؟
پارامتر
یک انتخاب کننده است که در قالب یک رشته به این متد ارسال میشود.
خروجی
مقدار true در صورت وجود دست کم یک عنصر و false در صورت عدم وجود توسط تابع برگردانده میشود.
٢-٣-٦-مدیریت زنجیرههای jQuery
تاکنون در مورد استفاده از متدها و توابع زنجیره ای زیاد بحث کرده ایم و انجام چندین عمل در یک دستور را به عنوان یک قابلیت بزرگ معرفی کرده ایم و البته از آن هم استفاده کردیم و در ادامه نیز استفاده خواهیم کرد. به کار گیری متدها به صورت زنجیره ای نه تنها موجب نوشتن کدهای قدرتمند و قوی به صورت مختصر و خلاصه میشود، بلکه از لحاظ کارایی نیز نکته مثبتی محسوب میشود، زیرا برای اعمال هر متد نیازی به محاسبه و انتخاب مجدد مجموعه نخواهد بود.
بنابراین متدهای مختلفی که در زنجیره استفاده میکنیم، برخی از آنها ممکن است مجموعههای جدیدی تولید کنند. برای مثال استفاده از متد ()clone موجب میشود تا مجموعه ای جدید از کپی عناصر در مجموعه اول ایجاد شود. زمانی که یکی از متدهای زنجیره یک مجموعه جدید را تولید میکند، دیگر راهی برای استفاده از مجموعه پیشین در زنجیره نخواهیم داشت و این نکته زنجیره ما را به خطر میاندازد. عبارت زیر را در نظر بگیرید:
$('img').clone().appendTo('#somewhere');
برای مرتفع کردن چنین نیازی، jQuery متد ()end را معرفی کرده است. زمانی از این متد استفاده میشود، یک نسخه پشتیبان از مجموعه کنونی ایجاد میشود . همان مجموعه برگردانده میشود. بنابراین اگر متدی پس از آن ظاهر شودف اثرش بروی مجموعه اولیه خواهد بود. مثال زیر را در نظر بگیرید:
$('img').clone().appendTo('#somewhere').end().addClass('beenCloned');
قالب کلی متد ()end به شکل زیر است:
()endشاید در نظر گرفتن مجموعهها در متدهای زنجیره ای به شکل یک پشته به درک بهتر از متد ()end کمک کند. هر زمان که یک مجموعه جدید در زنجیره ایجاد میشود، آن مجموعه به بالای پشته افزوده میشود، اما با فراخوانی متد ()end، بالاترین مجموعه از این پشته برداشته میشود و مجدادا مجموعه پیشین در زنجیره قرار میگیرد.
در متدهای زنجیره ای استفاده میشود و از مجموعه کنونی یک پشتیبان میگیرد تا همان مجموعه در زنجیره جریان داشته باشد.
پارامتر
ندارد
خروجی
مجموعه عنصر قبلی
متد دیگری که توانایی ایجاد تغییر در این پشته خیالی را دارد، متد ()andSelf میباشد. این متد دو مجموعه بالای پشته را با یکدیگر ادغام میکند و آنها را به یک مجموعه تبدیل میکند.
شکل کلی متد ()andSelf به صورت زیر است:
()andSelfدر مباحث بعدی کار با صفتها و ویژگیهای عناصر بحث خواهد شد.
دو مجموعه پیشین در یک زنجیره را با یکدیگر ادغام میکند.
پارامتر
ندارد
خروجی
مجموعه عنصری ادغام شده
موفق و موید باشید