انتخاب یک آیتم از عناصر در جی کوئری
مسئله
سلکتور jQuery پهناور است و تمام عناصر با تطابقی خاص را در صفحه انتخاب می کند. فرض کنید یک مجموعه از عناصر را انتخاب کرده ایم و می خواهیم از بین این عناصر انتخاب شده، یک آیتم تکی را بر اساس موقعیت آن به وسیله ی اندیس آن انتخاب کنیم. اما راه آسانی برای انجام این کار، بدون دست بردن در کدها وجود ندارد. راه حل چیست؟
راه حل
پس از اینکه ما با استفاده از جی کوئری، عناصر خود را انتخاب کردیم، می توانیم از متد .eq() استفاده کنیم و اندیس عنصر تکی که می خواهیم انتخاب کنیم را در داخل پرانتز آن قرار دهیم:
نکته: استفاده از متد مذکور مبتنی بر اندیس 0 است. یعنی اولین عنصر گزینش شده، دارای اندیس 0 است، یعنی کد $().eq(0); اولین عنصر را تعیین می کند؛ و دستور $().eq(4); پنجمین آیتم را مشخص می کند.
فرض کنید کنفرانس تیم ملی هاکی تشکیل شده است و می خواهیم بررسی کنیم که کدام تیم برنده کدام تیم بازنده است. کاری که باید انجام دهیم این است که لیست تمام تیم های شرکت کننده در کنفرانس، که در فصل اخیر بازی ها حضور داشته اند، را تهیه کنیم. چون که در هر کنفرانس دو دسته ی هشت تایی از تیم ها به مصاف یکدیگر می روند، ما تنها نیاز داریم تا در زیر هشتمین آیتم از هر دو دسته تیم، یک خط بکشیم. به صورت زیر:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<title>Chapter 3 - Recipe 2 - Reducing the selection set to specified item</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(){
$("ol#east > li").eq(7).css("border-bottom", "1px solid #000000");
$("ol#west > li").eq(7).css("border-bottom", "1px solid #000000");
});
})(jQuery);
</script>
</head>
<body>
<h2>Eastern Conference</h2>
<ol id="east">
<li>Boston Bruins</li>
<li>Washington Capitals</li>
<li>New Jersey Devils</li>
<li>Pittsburgh Penguins</li>
<li>Philadelphia Flyers</li>
<li>Carolina Hurricanes</li>
<li>New York Rangers</li>
<li>Montreal Canadians</li>
<li>Florida Panthers</li>
<li>Buffalo Sabres</li>
<li>Ottawa Senators</li>
<li>Toronto Maple Leafs</li>
<li>Atlanta Thrashers</li>
<li>Tampa Bay Lightning</li>
<li>New York Islanders</li>
</ol>
<h2>Western Conference</h2>
<ol id="west">
<li>San Jose Sharks</li>
<li>Detroit Red Wings</li>
<li>Vancouver Canucks</li>
<li>Chicago Blackhawks</li>
<li>Calgary Flames</li>
<li>St. Louis Blues</li>
<li>Columbus Blue Jackets</li>
<li>Anaheim Ducks</li>
<li>Minnesota Wild</li>
<li>Nashville Predators</li>
<li>Edmonton Oilers</li>
<li>Dallas Stars</li>
<li>Phoenix Coyotes</li>
<li>Los Angeles Kings</li>
<li>Colorado Avalanche</li>
</ol>
</body>
</html>(تصویر 3.2)
همان طور که مشاهده می کنید، ما تنها از یک لیست منظم(OL) برای لیست کردن آیتم ها به همان ترتیبی که قرار داشتند استفاده کردیم؛ سپس از جی کوئری برای اضافه کردن یک border-bottom در زیر هشتمین عنصر از هر لیست، استفاده کردیم. برای هر لیست منظم، ما به یک ID نیاز داریم تا بتوانیم هر لیست را به صورت مجزا مشخص کنیم. اگر ما تنها از دستور $("li").eq(7); استفاده کنیم،تنها لیست اول، انتخاب خواهد شد، زیرا این کوئری بر روی تمام عناصر <li> درون صفحه اجرا می شود.
توضیحات
از متد .eq() برای دریافت یک مجموعه و انتخاب یک آیتم تکی از آن استفاده می شود. این دستور یک آرگومان دریافت می کند که اندیس(index) عنصری که می خواهیم انتخاب کنیم را تعیین می کند. این اندیس، از 0 شروع می شود و تا length-1 ادامه می یابد. اگر این آرگومان، یک اندیس معتبر نباشد، این متد، یک مجموعه ی خالی را به جای مقادیر null برمی گرداند.
متد .eq() مانند این است که بنویسیم: $(":eq()") . این کار در گزینش ها صحیح است اما متد.eq() به ما امکان می دهد تا آن را به صورت زنجیروار به گزینش ها متصل کنیم و تنظیم دقیقی داشته باشیم.بعنوان مثال داریم:
$("li").css("background-color","#CCCCCC").eq(0).css("background-color","#ff0000");کد بالا باعث می شود که رنگ پس زمینه ی عناصر <li> تغییر کند و سپس اولین عنصر انتخاب شود و یک رنگ پس زمینه ی دیگر برای آن تنظیم شود.
{module کمک نقدی به نویسنده}
- بازدید: 595
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.