ایجاد یک فیلتر شخصی در جی کوئری

مسئله

ما به یک فیلتر که قابلیت استفاده ی مجدد داشته باشد نیاز داریم تا برخی عناصر خاص را بر اساس مشخصات آنها مورد هدف قرار دهد. ما به چیزی احتیاج داریم که کوتاه باشد و بتواند در داخل عبارت های سلکتور(selector expressions) مورد استفاده قرار گیرد.

راه حل

برای توسعه ی عبارت های سلکتور ما می توانیم از شیء jQuery.expr[':'] استفاده کنیم. این شیء یک مستعار از Sizzle.selectors.filters می باشد. هر عبارت فیلتری(filter expression) به صورت یک پروپرتی(property) از این شیء تعریف می شود؛ مانند زیر:

jQuery.expr[':'].newFilter = function(elem, index, match){
  return true; // را برمی گرداند false یا  true مقادیر filter مانند متد
};

 تابع بالا می تواند بر روی تمام عناصر در مجموعه ی( collection) فعلی اجرا شود و برای نگه داشتن عنصر در مجموعه(collection) نیاز به برگرداندن true و برای حذف عنصر از مجموعه، نیاز به برگرداندن false دارد. به این تابع، سه چیز پاس داده می شود: عنصر درون سوال، و اندیس(index) این عنصر در میان تمام مجموعه(collection) و آرایه ی تطابق یافته که از یک تطابق عبارت منظم برگردانده شده است؛ که حاوی اطلاعات مهم برای عبارت های پیچیده تر است.

 بعنوان مثال، ممکن است بخواهید تمام عناصری که یک پروپرتی(property) خاص دارند را مورد هدف قرار دهید. در فیلتر زیر، ما تمام عناصری که پروپرتی display آنها inline است را مورد تطابق قرار می دهیم:

jQuery.expr[':'].inline = function(elem) {
  return jQuery(elem).css('display') === 'inline';
};

 اکنون که ما یک سلکتور شخصی ایجاد کرده ایم، می توانیم از آن در هر عبارت سلکتوری استفاده کنیم:

// E.g. #1
jQuery('div a:inline').css('color', 'red');
// E.g. #2
jQuery('span').filter(':not(:inline)').css('color', 'blue')

 سلکتورهای شخصی جی کوئری(مثال radio: و hidden: و غیره) به همین طریق ایجاد شده اند.

توضیحات

همان طور که گفته شد، سومین پارامتری که به تابع فیلتر شخصی خود پاس می دهیم، یک آرایه است که از تطابقِ یک عبارت منظم، که جی کوئری آن را بر روی رشته سلکتور اجرا می کند، به دست آمده است. اگر بخواهیم یک عبارت فیلتر ایجاد کنیم که پارامترها را بپذیرد، این تطابق بسیار مفید است. فرض کنید که می خواهیم یک سلکتور ایجاد کنیم که بر روی داده های(data) نگهداری شده توسط جی کوئری، یک کوئری را اجرا کند:

jQuery('span').data('something', 123);
  // We want to be able to do this:
jQuery('*:data(something,123)');

  هدف این سلکتور این است که تمام عناصری که توسط متد جی کوئری data() داده ای به آنها متصل شده است را انتخاب کند. کد بالا به طور مشخص عناصری را هدف قرار می دهد که کلید داده ی آنها something است و برابر با مقدار 123 است.   

 توضیح: در کدهای بالا در خط 1، یک عنصر span را انتخاب می کنیم و با استفاده از متد data در جی کوئری، داده ی 123 را در داخل نام something قرار می دهیم و به عنصر span متصل می کنیم. سپس در خط 3 ، از نماد * استفاده می کنیم و تمام عناصر صفحه را مورد خطاب قرار می دهیم و سپس از میان این عناصر، آنها که عنصر داده ی something به آنها متصل شده است را انتخاب می کنیم. فیلتر مطرح شده(data:) به صورت زیر ایجاد می شود:

jQuery.expr[':'].data = function(elem, index, m) {
// Remove ":data(" and the trailing ")" from
// the match, as these parts aren't needed:
m[0] = m[0].replace(/:data\(|\)$/g, '');
var regex = new RegExp('([\'"]?)((?:\\\\\\1|.)+?)\\1(,|$)', 'g'),
// Retrieve data key:
key = regex.exec( m[0] )[2],
// Retrieve data value to test against:
val = regex.exec( m[0] );
if (val) {
 val = val[2];
}
// If a value was passed then we test for it, otherwise
// we test that the value evaluates to true:
return val ? jQuery(elem).data(key) == val : !!jQuery(elem).data(key);
};

 علت اینکه از چنین عبارت منظم(regular expression) پیچیده ای استفاده کردیم، این است که می خواهیم تا جای امکان انعطاف پذیر باشد. این سلکتور جدید می تواند به طرق مختلفی مورد استفاده قرار گیرد:

// نسخه ی اصلی استفاده شده در بالا
jQuery('div:data("something",123)');
// something بررسی مقدار قرار گرفته در
jQuery('div:data(something)');
// با یا بدون نقل قول های درونی
jQuery('div:data(something, "something else")');

 اکنون ما یک راه جدید برای کوئری زدن بر روی داده هایی(data) که بر روی عناصر ذخیره شده اند،  توسط جی کوئری یاد گرفتیم. اگر می خواهید به طور همزمان، بیش از یک سلکتور جدید را اضافه کنید، بهتر است از متد جی کوئری extend() استفاده کنید:

jQuery.extend(jQuery.expr[':'], {
newFilter1 : function(elem, index, match){
// Return true or false.
},
newFilter2 : function(elem, index, match){
// Return true or false.
},
newFilter3 : function(elem, index, match){
// Return true or false.
}
});

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