استفاده از متد ()filter در جی کوئری

Ratings
(0)


مسئله: فرض کنید که یک مجموعه از عناصر DOM را با جی کوئری انتخاب کرده ایم اما می خواهیم عناصری از این مجموعه که با ویژگی خاصی تطابق دارند را حذف کنیم.

راه حل: از متد filter که در جی کوئری وجود دارد، می توانیم برای حذف عناصری که با یک یا چند عبارت خاص تطابق ندارند استفاده کنیم. به عبارت ساده تر، متد ()filter به ما امکان می دهد تا یک مجموعه از عناصر را فیلتر کنیم. برای درک متد filter، به کدهای زیر توجه کنید.

<!DOCTYPE html >
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
  <a href="#" class="external">link</a>
  <a href="#" class="external">link</a>
  <a href="#"></a>
  <a href="#" class="external">link</a>
  <a href="#" class="external">link</a>
  <a href="#"></a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <a href="#">link</a>
  <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
  <script type="text/JavaScript">
  //مقدار 4 را برمی گرداند یعنی 4 عنصر باقی مانده اند
  alert(jQuery('a').filter('.external').length + ' external links');
  </script>
</body>
</html>

 در صفحه ی html بالا، تنها 10 عنصر <a> وجود دارند. در میان این عناصر،چند تا از آنها از یک کلاس به نام external برخوردار هستند.ما با استفاده از متد jQuery  تمام عناصر <a> در صفحه را انتخاب می کنیم. سپس با استفاده از متد filter، تمام عناصری که کلاس آنها برابر با external نیست را از بقیه ی عناصر حذف می کنیم.   آنگاه  از پروپرتی length استفاده می کنیم؛ این پروپرتی تعداد عناصری که پس از فیلتر شدن باقی مانده اند را مشخص می کند.

توضیحات کدها

این امکان نیز وجود دارد که متد ()filter را به یک تابع ارجاع دهیم تا عناصر مورد نظر را فیلتر کند. کدهای قبلی، که در آن به متد filter یک عبارت دادیم، را می توانیم طوری تغییر دهیم که به جای آن از یک تابع استفاده شود؛ به مثال زیر توجه کنید:

alert(
 jQuery('a')
  .filter(function(index){ return $(this).hasClass('external');})
  .length + ' external links'
 );

 توجه کنید که ما در کدهای بالا، به متد() filter یک تابع بی نام داده ایم. در داخل این تابع، با استفاده از دستور $(this)به عنصر جاری اشاره می کنیم(یعنی به تک تک عناصر) و با استفاده از دستور hasClass بررسی می کنیم که آیا این عنصر دارای کلاسی به نام external است یا نه. در حقیقت در درون این تابع، ما بررسی می کنیم که هر عنصر <a> کلاسی به نام external دارد یا نه. اگر داشته باشد، یعنی عبارت ما true باشد، آن عنصر را در مجموعه نگه می داریم و اگر نداشته باشد، یعنی عبارت ما false باشد، آنگاه آن عنصر را از مجموعه حذف می کند. از نگاه دیگر، می توان گفت که، اگر این تابع، مقدار false را برگرداند، آنگاه عنصر مورد نظر حذف می شود. اما اگر این تابع، غیر از false هر مقدار دیگری را برگرداند، عنصر مورد نظر در مجموعه باقی خواهد ماند. ممکن است متوجه شده باشید که ما یک پارامتر به نام index به این تابع داده ایم که از آن استفاده ای نکرده ایم. از این پارامتر، در صورت نیاز می توانیم برای رجوع عددی به ایندکس عنصر استفاده کنیم.

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

  • بازدید: 705

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.

ارسال