میخوای وارد بازار کار بشی و محصولات خودت رو بفرشی همین الان ثبت نام کن
0

siblings & filtering در جی کوئری

۵۹ / ۱۰۰

سلام به شما همراهان و دوستان محترم سایت آموزشی و فروشگاهی مدرسه کدنویسی به دوره ی آموزش jQuery (جی کوئری) خوش آمدید. در این دوره قصد داریم شما را با siblings & filtering در جی کوئری jQuery آشنا کرده نحوه استفاده از آن را به شما آموزش دهیم پس با من همراه باشید.

 


عناصر خواهر و برادر یا 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"); 
});

 

امیدواریم آموزش siblings & filtering در جی کوئری jQuery نیز برای شما مفید واقع شده باشد و ادامه آموزش  آشنایی با jQuery را دنبال کنید . برای مطالعه پست‌ها بیشتر ، ما را در مدرسه کدنویسی تلگرام  و یا در تی جوان اینستاگرام دنبال کنید.

نظراتتون رو زیر همین پست با ما به اشتراک بگذارید.
ارسال دیدگاه

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

×

سلام کاربر عزیز

هر سوالی دارید در این بخش هستیم تا شما رو راهنمائی کنیم

روی لوگومون کلیک کنید

× چطور میتونم کمکتون کنم؟