انتخاب یک عنصر بر اساس مشخصات خاص

مسئله

ما نیاز داریم یک عنصر را نه تنها بر اساس ارتباط آن با دیگر عناصر، یا بر اساس مقادیر ساده ی خصوصیت ها(attribute)، بلکه بر اساس تغییر مشخصاتی که به صورت عبارات سلکتوری قابل بیان نیستند، انتخاب کنیم.

راه حل

اگر به دنبال یک عنصر با مشخصات خیلی خاص هستید، عبارت های سلکتوری ممکن است جوابگو نباشند. با استفاده از متد فیلتر DOM یعنی متد filter() ما می توانیم، عناصر را بر اساس یک تابع انتخاب کنیم. متد filter در جی کوئری به ما امکان می دهد تا یک رشته(مثلا یک عبارت سلکتوری) یا یک تابع را به آن پاس بدهیم. اگر به متد filter یک تابع را پاس بدهیم، مقدار برگشتی(return) آن مشخص می کند که آیا فلان عناصر انتخاب شده اند یا نه. این تابع که ما مشخص کرده ایم، بر روی هر عنصری که سلکت(current selection) شود اجرا خواهد شد. هر زمان که این تابع مقدار false را برگرداند، عنصر متناظر از مجموعه(collection) حذف می شود و هر زمان که ما true را برگردانیم، عنصر متناظر تحت تاثیر قرار نمی گیرد(مثلا در مجموعه یا collection باقی می ماند):

jQuery('*').filter(function(){
  return !!jQuery(this).css('backgroundImage');
});

کد بالا تمام عناصری که تصویر پس زمینه(background image) دارند را انتخاب می کند. برای این کار، ابتدا با استفاده از علامت * تمام عناصر را انتخاب می کند، سپس متد filter() به همراه یک تابع فراخوانی می شود.,وقتی که یک backgroundImage برای عنصر مسئله مشخص شده باشد، این تابع مقدار true را برمی گرداند. علامت !! یک راه سریع برای تبدیل هر نوع(type) در جاوا اسکریپت به مقدار بولین آن است.

چیزهایی که ارزش false ایجاد می کنند عبارتند از:

• یک رشته ی خالی
• عدد صفر
• مقدار undefined
• null
• خود مقدار بولین false

اگر هریک از اینها در حین کوئری زدن روی backgroundImage برگردانده شوند، تابع ما مقدار false را برمی گرداند؛ بنابراین تمام عناصری که background images نداشته باشند از مجموعه(collection) حذف می شوند.

بیشتر چیزهای که گفتیم، مربوط به جی کوئری نیستند بلکه اصول جاوا اسکریپت هستند. در حقیقت نماد !! ضروری نیست، زیرا جی کوئری خودش مقدار برگشتی را به بولین(Boolean) تبدیل می کند، اما اگر از آن استفاده کنیم، ایده ی خوبی است؛ زیرا هرکس که به کدهای ما نگاه کند، می تواند بفهمد که شما چه چیزی در نظر داشته اید(به خوانایی کدها کمک می کند).

در داخل تابعی که در داخل متد filter() قرار دارد، با استفاده از کلمه ی thtis می توانیم به عنصر فعلی(current element) دسترسی پیدا کنیم. حالا برای اینکه عنصر فعلی را در داخل یک شیء(آبجکت) جی کوئری قرار دهیم(تا بتوانیم بر روی آن به متدهای جی کوئری دسترسی پیدا کنیم و روی آن کار کنیم) کلمه ی this یا همان عنصر فعلی را در داخل تابع jQuery قرار می دهیم:

this; // Regular element object
jQuery(this); // jQuery object

در زیر نیز چند مثال فیلتر کردن وجود دارد:

// که عرض آنها بین صد تا دویست پیکسل است  DIV انتخاب تمام عناصر
jQuery('div').filter(function(){
  var width = jQuery(this).width();
return width > 100 && width < 200;
});
// انتخاب تمام عکس های که پسوندهای تصویر دارند
jQuery('img').filter(function(){
  return /\.(jpe?g|png|bmp|gif)(\?.+)?$/.test(this.src);
});
// انتخاب تمام عناصری که 10 یا 20 فرزند دارند
jQuery('*').filter(function(){
  var children = jQuery(this).children().length;
  return children === 10 || children === 20;
});

توضیحات

همواره برای یک کار، چندین راه وجود دارد؛ این موضوع درباره ی انتخاب(select) عناصر با جی کوئری نیز صادق است. اما در اینجا سرعت است که حرف اول را می زند. برخی راه ها سریع هستند و برخی کند هستند. وقتی که ما از یک سلکتور پیچیده استفاده کنیم، باید فکر کنید که جی کوئری چقدر در پس زمینه باید تلاش کند تا این کار انجام شود. هرچه سلکتور پیچیده تر و طولانی تر باشد، دیرتر طول می کشد تا ما را به نتیجه برساند.

 متدهای محلی جی کوئری گاهی اوقات م توانند نسبت به یک سلکتور سریع تر عمل کنند، همچنین می توانند باعث افزایش خوانایی هم شوند. دو تکنیک زیر را در نظر بگیرید:

jQuery('div a:not([href^=http://]), p a:not([href^=http://])');
jQuery('div, p').find('a').not('[href^=http://]');

 تکنیک دوم کوتاه تر است و نسبت به اولی از خوانایی بیشتری برخوردار است. با تست در فایرفاکس 3 و سافاری 4، متوجه می شویم که کدهای خط دوم سریع تر از کدهای خط اول است.

 {module کمک نقدی به نویسنده}