ایجاد حلقه بر روی عناصر در جی کوئری

Ratings
(0)

مسئله

ما نیاز داریم که از یک مجموعه عناصر DOM انتخاب شده، یک لیست ایجاد کنیم، و  قصد داریم بر روی این عناصر انتخاب شده، کاری را انجام دهیم. برای اینکه بتوانیم برای هر عنصر تکی، یک لیست ایجاد کنیم، نیاز داریم  تا بر روی هر عنصر از مجموعه ی انتخاب شده، عملیات خاصی را انجام دهیم.

 راه حل

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

ما ابتدا می خواهیم از انتخابگر jQuery استفاده کنیم و با استفاده از دستور $("div#post a[href]")  تمام لینک هایی که خصوصیت href دارند و در داخل یک عنصر <div> با  آی دی  post قرار دارند، را انتخاب کنیم. بر روی هر عنصری که مورد تطابق قرار گیرد، یک حلقه می زنیم و آن را در داخل یک آرایه قرار می دهیم. به مثال زیر توجه کنید:

var urls = [];
$("div#post a[href]").each(function(i) {
urls[i] = $(this).attr('href');
});
alert(urls.join(","));

 ما توانستیم یک آرایه ایجاد کنیم، زیرا بر روی هر عنصر، کدهایی را به وسیله ی دستور $().each();  تکرار کردیم. ما می توانیم به عناصر تکی، دسترسی پیدا کنیم و متدهای جی کوئری را بر روی آنها اجرا کنیم؛ زیرا ما متغیر this را در داخل بسته بند ی کننده ی جی کوئری یعنی در داخل $() قرار دادیم؛ که باعث می شود به یک شیء جی کوئری تبدیل شود.

 

توضیحات

جی کوئری یک متد هسته ای دارد که می توانیم از آن برای ایجاد حلقه بر روی یک مجموعه از عناصر DOM انتخاب شده، استفاده کنیم. از متد $().each() بعنوان حلقه ی for جی کوئری استفاده می شود. که یک میدان دید جداگانه برای هر عنصر مجموعه ایجاد می کند. دستور $().each(); به طور انحصاری بر روی اشیاء جی کوئری، کدهایی تکراری را  ایجاد می کند.

 نکته: دستور $().each(); همانند دستور کاربردی jQuery.each(object, callback); نیست. متد jQuery.each یک تکرار کننده ی کلی تر است که بر روی هردوی اشیاء(objects) و آرایه ها اجرا می شود. برای اطلاعات بیشتر در مورد دستور jQuery.each() به مستندات جی کوئری مراجعه کنید.

 

هر بار که حلقه تکرار شود، ما یک خصوصیت href را از عنصر فعلی در داخل گزینش اصلی،  دریافت می کنیم. برای دریافت عنصر DOM فعلی، از کلمه ی کلیدی this استفاده می کنیم. سپس ما آن را در داخل آبجکت جی کوئری $(this) قرار می دهیم، حالا می توانیم متدهای جی کوئری را بر روی عنصر مورد نظر اجرا کنیم و خصوصیت href را از عنصر DOM مذکور خارج کنیم. آخرین کاری که باید انجام دهیم این است که خصوصیت href مذکور را در داخل یک آرایه ی سراسری(global) به نام urls قرار دهیم.

اکنون می توانیم نتیجه را مشاهده کنیم؛ URL های  آرایه به وسیله ی علامت کاما، با یکدیگر ادغام شده اند و در داخل یک جعبه ی alert به کاربر نشان داده می شوند. ما همچنین می توانستیم لیست خود را در داخل یک لیست DOM نامنظم(یعنی عنصر ul )  قرار دهیم و به کاربر نشان دهیم.

 ما همچنین می توانیم لیست URL ها را به فرمت JSON در آوریم  و آن را برای پردازش در دیتابیس، در داخل سرور قرار دهیم. اجازه دهید در قالب یک مثال دیگر از دستور $().each(); استفاده کنیم.این مثال، احتمالا واضح ترین مثال در مورد دستور $().each(); است. فرض کنید که یک لیست نامنظم داریم که در آن چند نام وجود دارد و می خواهیم هریک از نام ها را برجسته کنیم. تنها راهی که برای این کار وجود دارد این است که یک رنگ پس زمینه ی متفاوت را برای آیتم های لیست نامنظم تنظیم کنیم:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
  <title>Chapter 3 - Recipe 1 - Looping through a set of selected results</title>
  <style type="text/css">
    .even { background-color: #ffffff; }
    .odd { background-color: #cccccc; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript"></script>
  <script type="text/javascript">
  (function($){
    $(document).ready(function() {
      $("ul > li").each(function(i) {
        if (i % 2 == 1)
        {
          $(this).addClass("odd");
        }
        else
       {
         $(this).addClass("even");
       }
    });
  });
 })(jQuery);
</script>
</head>

<body>
 <h2>Family Members</h2>
 <ul>
  <li>Ralph</li>
  <li>Hope</li>
  <li>Brandon</li>
  <li>Jordan</li>
  <li>Ralphie</li>
 </ul>
</body>
</html>

 

(تصویر 3.1: خروجی کدها)

تصویر 3.1: خروجی کدها

چون که ما بر رو هر عنصر <li> یک تکرار ایجاد می کنیم، بررسی می کنیم که آیا اندیس فعلی که بعنوان یک آرگومان تکی، به هنگا اجرای کدها، در داخل تابع مورد نظر قرار گرفته است، و بر 2 تقسیم شده است ، باقی مانده ی آن 1 است یا نه. بر اساس این شرط، ما به عنصری که باقی مانده ی اندیس  آن بر 2 برابر با 1 باشد، کلاس odd.(فرد)  را اضافه می کنیم و به عنصری که باقی مانده ی اندیس آن تقسیم بر 2 برابر با 0 باشد، کلاس even. (زوج) اضافه می کنیم.

 

با اینکه مثال بالا، واضح ترین راه برای استفاده از دستور $().each() است،موثر ترین راه برای ایجاد رنگ های متناوب پس زمینه نیست. زیرا ما می تونیم این کار را با یک خط کد، به صورت زیر انجام دهیم:

$("ul > li:odd").addClass("odd");

 تنها کاری که باید انجام دهیم این است که تمام عناصر <li> را در CSS به کلاس even. تنظیم کنیم؛ تا بتوانیم بر روی عناصر <li> که کلاس odd. دارند، با جی کوئری، کلاس odd. را رو نویسی کنیم.

از  تابع پایه ی $.each() برای گرفتن مجموعه ی تطابق یافته و تکرار بر روی هر یک از این عناصر با ارجاع به اندیس استفاده می شود. سپس  برخی کارها بر روی آن انجام شده و  بر روی عنصر بعدی، تکرار انجام می شود. تا وقتی که دیگر هیچ عنصری باقی نمانده باشد.

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

  • بازدید: 1140

نوشتن دیدگاه

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

ارسال