قسمت آخر: (siblings & filtering)

با قسمت آخر از دوره آموزش کتابخانه جی کوئری همراه شما هستیم. در قسمت قبل به مباحث مربوط به ساختار درختی عناصر در نسبت ها والد و فرزند و زیرشاخه ها پرداختیم. در این قسمت به آخرین مباحث این دوره یعنی عناصر siblings در جی کوئری و متدهای filtering خواهیم پرداخت.

عناصر خواهر و برادر یا siblings در جی کوئری

با استفاده از جی کوئری شما می توانید در یک خط از درخت عناصر سند وب خود حرکت و عناصری با والدهای مشترک را پیدا کنید.

متد siblings در جی کوئری

با استفاده از این متد شما می توانید تمامی عناصر خواهر و برادر عنصر مورد نظر را انتخاب کنید. منظور از عناصر خواهر و برادر عناصری است که دقیقا با عنصر مورد نظر ما parent مشترک دارند.

در کد زیر مشاهده می کنید که تمامی عناصر هم سطح با عنصر h2 ما بازگردانده می شوند.

$(document).ready(function(){
  $("h2").siblings();
});

شما همچنین می توانید مانند نمونه ی زیر، عنصر مورد نظر را فیلتر کنید. یعنی مثلا بگویید که از بین عناصر هم سطح و siblings فقط تگ های p را به من نمایش بده.

$(document).ready(function(){
  $("h2").siblings("p");
});

متد next در جی کوئری

با استفاده از این متد شما می توانید عنصر بعد از عنصر انتخاب شده را که با آن همسطح و عنصر برادر است، انتخاب کنید. برای مثال  در کد زیر ما عنصر بعد از تگ h2 را بازگردانده ایم.

$(document).ready(function(){
  $("h2").next();
});

متد nextAll در جی کوئری

با استفاده از این متد شما می توانید تمامی عناصر بعد از عنصر انتخاب شده را بازگردانید. در کد زیر ما همه ی عناصر بعد از تگ h2 را انتخاب کرده ایم.

$(document).ready(function(){
  $("h2").nextAll();
});

متد nextUntil

این متد مانند متد parentsUntil که قبلا با آن آشنا شدیم، تمامی عناصر بعد از عنصر ما را تا عنصر مشخصی برای ما بازمی گرداند.

در مثال زیر می بینیم که تمامی عناصر بعد از h2 تا h6 برای ما بازگردانده می شوند اما خود h6 انتخاب نمی شود:

$(document).ready(function(){
  $("h2").nextUntil("h6");
});

متدهای  prev ، prevAll و  prevUntil

سه متد prev ،prevAll و prevUntil دقیقا مانند متدهای next ،next all و next until رفتار می کنند، با این تفاوت که برای عناصر قبل از عنصر انتخاب شده عمل می کنند.

متدهای filtering در جی کوئری

متد first

با استفاده از این متد شما می توانید اولین عنصر از بین چند عنصر را انتخاب کنید. برای مثال در کد زیر ما اولین div از بین تمامی div های موجود در سند وب را انتخاب کرده ایم.

$(document).ready(function(){
  $("div").first();
});

متد last

با استفاده از این متد شما می توانید آخرین عنصر از بین لیست عناصر موجود در سند وب را انتخاب کنید. در نمونه زیر ما آخرین div از بین div های موجود درصفحه را انتخاب کرده ایم.

$(document).ready(function(){
  $("div").last();
});

متد eq

اگر بخواهیم به جای انتخاب آخرین یا اولین عنصر در بین عناصر صفحه، عنصری با index خاص انتخاب کنیم باید از متد eq استفاده کنیم.

برای دادن این index در پارامتر این متد به یاد داشته باشید که index ها از یک شروع می شوند نه از صفر. یعنی اولین عنصر مورد نظر دارای index صفر است و آخرین آن دارای index تعداد عناصر موجود در document منهای یک می باشد، یعنی یکی کمتر از تعداد عنصر های موجود در لیست.

مثال: با کد زیر ما پاراگرافی با index یک را بازگردانده ایم (یعنی دومین پاراگراف از پاراگراف های موجود).

$(document).ready(function(){
  $("p").eq(1);
});

متد filter در جی کوئری

با استفاده از این متد شما می توانید عنصری با ویژگی مشخصی را return کنید. برای نمونه در مثال زیر ما پاراگراف هایی با کلاس  intro را return می کنیم.

$(document).ready(function(){
  $("p").filter(".intro");
});

متد not در جی کوئری

این متد دقیقا برعکس متد filter عمل می کند. یعنی هر ویژگی که به عنوان پارامتر به آن بدهید، دقیقا عناصری که آن ویژگی را ندارند به شما بازمی گرداند.

در کد زیر ما پاراگراف هایی را که کلاس intro ندارند، بازگردانده ایم:

$(document).ready(function(){
  $("p").not(".intro");
});

خب دوره آموزش کتابخانه جی کوئری در اینجا به پایان می رسد.

در پایان این دوره آموزشی مباحث مطرح شده در این دوره را با هم مرور می کنیم:

۱ – سلکتورها و روش های انتخاب عناصر در جی کوئری
۲- رویدادها و متدهای مربوط به آن ها
۳- افکت ها مخفی کردن و ظاهر کردن عناصر
۴- متدهای مربوط به محو کردن عناصر و Fading
۵- انیمیشن های اسلاید کشویی
۶- متد انیمیشن و ساخت انیمشن های اختصاصی
۷- توقف انیمیشن ها و ساختار زنجیره ای دستورات
۸- دریافت محتوای سند وب و قراردادن محتوا در عناصر با استفاده از جی کوئری
۹- اضافه کردن و حذف عناصر در سند وب
۱۰- ایجاد تغییرات در کلاس ها و ویژگی های CSS عناصر با استفاده از جی کوئری
۱۱- مباحث مربوط به ابعاد و متدهای مربوط به آن ها
۱۲- ساختار های درختی عناصر و نسبت های والد و فرزند
۱۳- فیلتر کردن عناصر با استفاده از جی کوئری

باید در نظر داشته باشید که متدهای بسیار زیادی در جی کوئری برای کار با عناصر وجود دارد و ما در این دوره تنها به متدهای مهم و پرکاربرد اشاره کردیم.

همچنین مطالب گفته شده اگر روی آنها تمرین نشود به سادگی فراموش خواهد شد. بنابراین توصیه ما به شما این است که کدهایی را که در این آموزش به صورت نمونه آورده شد، خودتان هم امتحان کنید و عملکرد آنها را ببینید.

امیدواریم که این سری آموزشی برای شما مفید بوده باشد. با آرزوی موفقیت برای شما!