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

Ratings
(0)

مسئله

ما یک لیست منظم(ordered list) در صفحه ی خود داریم. ما تمام عناصر <li> این لیست را با استفاده از جی کوئری،  انتخاب کرده ایم؛ اکنون می خواهیم این لیست را به یک لیست دیگر تبدیل کنیم.

راه حل

فرض کنید که در داخل یک لیست منظم(ordered list)، نام چند نفر نوشته شده باشد. و ما می خواهیم نام سه نفر اول از این لیست منظم را به صورت یک جمله در آوریم و نمایش دهیم:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Chapter 3 - Recipe 5 - Making a unique array of values from an existing array</title>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/javascript">
  <!--
 (function($){
   $(document).ready(function(){
    var arr = $.map($("LI"), function(item, index){
     while (index < 3)
     {
       return $(item).html();
     }
    return null;
   });
    $(document.body).append("<span>The first three authors are: " + arr.join(", ") + "</span>");
  });
 })(jQuery);
  //-->
 </script>
</head>
<body>
 <h1>jQuery Cookbook Authors</h1>
 <ol>
  <li>John Resig</li>
  <li>Cody Lindley</li>
  <li>James Padolsey</li>
  <li>Ralph Whitbeck</li>
  <li>Jonathan Sharp</li>
  <li>Michael Geary</li>
  <li>Scott González</li>
  <li>Rebecca Murphey</li>
  <li>Remy Sharp</li>
  <li>Ariel Flesler</li>
  <li>Brian Cherne</li>
  <li>Jörn Zaefferer</li>
  <li>Mike Hostetler</li>
  <li>Nathan Smith</li>
  <li>Richard D. Worth</li>
  <li>Maggie Wachs</li>
  <li>Scott Jehl</li>
  <li>Todd Parker</li>
  <li>Patty Toland</li>
  <li>Rob Burns</li>
 </ol>
</body>
</html>

 در کدهای بالا، در خط 11،  ما ابتدا از تمام عناصر یک لیست منظم(ordered list) یک آرایه ایجاد کردیم.  در این خط، ما می خواهیم با استفاده از سلکتور جی کوئری،  تمام عناصر <li> را انتخاب کنیم و آن را بعنوان  آرگومان اول،  به متد $.map() بدهیم. این متد، یک آرایه ی موجود را می گیرد و آن را به یک آرایه ی دیگر تبدیل(map it) می کند. آرگومان دوم متد map نیز یک تابع است که بر روی عناصر آرگومان اول تکرار ایجاد می کند(حلقه می زند) و تغییراتی بر روی این عناصر انجام می دهد و مقادیر جدید را برمی گرداند تا در یک آرایه ذخیره شوند.

(تصویر 3.6)

تصویر 3.6

 در مثال بالا، ما بر روی عناصری که انتخاب کردیم، حلقه می زنیم و تنها مقدار html() سه عنصر اول را برمی گردانیم و این مقادیر را به یک آرایه ی دیگر تبدیل می کنیم. سپس ما این آرایه را دریافت کرده و با استفاده از متد join آن را به یک رشته ی تکی تبدیل می کنیم و در انتهای سند آن را تزریق می کنیم.

توضیحات

در این راه حل، ما از متد جی کوئری  $.map() استفاده می کنیم که یک آرایه ی موجود را به یک آرایه ی دیگر از آیتم ها تبدیل می کند. متد $.map() دو آرگومان می گیرد، یک آرایه و یک تابع فراخوانی(callback)؛ به مثال زیر توجه کنید:

$.map([1,2,3], function(n,i) { return n+i;});
//Output: [1,3,5]

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

 

نکته: اگر مقدار null برگردانده شود، هیچ مقداری در داخل آرایه ی جدید ایجاد نمی شود. برگرداندن null در اصل باعث می شود که این آیتم از آرایه ی جدید حذف شود.

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

  • بازدید: 750

نوشتن دیدگاه

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

ارسال