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

Ratings
(0)

مسئله

وقتی که یک رویداد را برای یک محدوده ی وسیع از عناصر روی صفحه تعریف می کنیم، نیاز پیدا می کنیم که بدانیم دقیقاً  بر روی کدام آیتم از مجموعه عناصر گزینش شده کلیک شده است؛

راه حل

وقتی که ما بر روی یک آیتم کلیک می کنیم، می توانیم از متد هسته ای index() استفاده کنیم تا جستجو کنیم که این آیتم، در داخل یک مجموعه عناصر گزینش شده،  از چه اندیسی استفاده می کند:

<!DOCTYPE html>
<head>
 <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
 <title>Chapter 3</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(){
     $("div").click(function() {
       alert("You clicked on div with an index of " + $("div").index(this));
     });
   });
 })(jQuery);
//-->
</script>
</head>
<body>
 <div>click me</div>
 <div class="test">test</div>
 <div>click me</div>
</body>
</html>

 نتیجه ی کدهای بالا به صورت زیر است:

(تصویر 3.5)

تصویر 3.5

 در کدهای بالا، ما بر روی تمام عناصر <div> یک رویداد کلیک(click event) تعریف کردیم. سپس وقتی که بر روی یک عنصر <div> کلیک شود، ما می توانیم متوجه شویم که بر روی کدام عنصر <div> کلیک شده است. برای انجام این کار، ما باید با استفاده از دستور $("div").index(this); مشخص کنیم که در گزینش ها، بر روی کدام عنصر <div> کلیک شده است. در اینجا، کلمه ی کلیدی this نقش همان عنصری را بازی می کند که بر روی آن کلیک شده است.

توضیحات

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

var test = $("div.test");
$("div").each(function(i){
  if ($(this).index(test) >= 0)
 {
  //do something
 }
 else
 {
 //do something else
 }
});

 در کدهای بالا، ما در خط اول، یک عنصر را انتخاب کردیم و در متغیر test قرار دادیم. در خط 2، تمام div های درون صفحه را انتخاب کردیم و بر روی تک تک آنها حلقه زدیم.  سپس در خط 3 در داخل دستور if، مجموعه عناصر div  فعلی را با دستور this انتخاب کردیم و با استفاده از متد index() اندیس این عنصر که با متغیر test تطابق دارد را برمی گردانیم؛ که بررسی کند که اگر این اندیس بزرگتر از 0 باشد کاری را انجام دهد و اگر از صفر کوچکتر باشد، کار دیگری انجام دهد.

 

نکته: اگر متد index نتواند موضوعی که به آن پاس داده شده است را پیدا کند، مقدار 1- را برمی گرداند.

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

  • بازدید: 855

نوشتن دیدگاه

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

ارسال