
دوره جامع و پروژهمحور طراحی وب با تمرکز روی JavaScript، Ajax و API! با طراحی ریسپانسیو و پروژههای حرفهای مثل دیجیکالا و شمرون کباب مهارتت رو حرفهای کن!
مشاهده بیشتر
این دوره شما رو از مفاهیم پایه تا مباحث پیشرفته مثل JavaScript، React و Next.js پیش میبره. با آموزش پروژهمحور، یک فروشگاه اینترنتی کامل طراحی میکنید و برای ورود به بازار کار آماده میشید!
مشاهده بیشترمشخصات مقاله
آموزش فیلترینگ و محدود کردن جستجو - jquery filtering
پیمایش در jQuery – فیلترینگ و محدود کردن جستجو
سه متد اصلی برای اعمال فیلترینگ وجود دارد که عبارتند از: first()، last() و eq(). سه متد نام برده به شما این امکان را می دهد که با توجه به موقعیت المان مورد نظر در مجموعه، به دنبال آن بگردید و بدین وسیله جستجو را محدود سازید.
متد ()first
اولین عنصر از بین عناصر انتخاب شده را بازمی گرداند.
مثال زیر اولین المان
که داخل اولین المان <div> قرار دارد را برمی گزیند:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("div p").first().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is the first paragraph in body.</p> <div style="border: 1px solid black;"> <p>This is the first paragraph in a div.</p> <p>This is the last paragraph in a div.</p> </div><br> <div style="border: 1px solid black;"> <p>This is the first paragraph in another div.</p> <p>This is the last paragraph in another div.</p> </div> <p>This is the last paragraph in body.</p> </body> </html>
متد ()last
این متد آخرین المان را از میان المان های انتخاب شده، برمی گرداند.
مثال زیر آخرین المان
<p>
که داخل آخرین عنصر <div> قرار دارد را برمی گرداند:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("div p").last().css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>This is the first paragraph in body.</p> <div style="border: 1px solid black;"> <p>This is the first paragraph in a div.</p> <p>This is the last paragraph in a div.</p> </div><br> <div style="border: 1px solid black;"> <p>This is the first paragraph in another div.</p> <p>This is the last paragraph in another div.</p> </div> <p>This is the last paragraph in body.</p> </body> </html>
متد ()eq
متد ()eq یک عنصر را بر اساس اندیس آن، از میان المان های انتخاب شده بازمی گرداند.
در جاوا اسکریپت شماره گذاری از صفر آغاز می شود نه از 1، بنابراین اولین المان دارای اندیس 0 می باشد. مثال زیر دومین تگ
<p>
را گزینش می کند:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("p").eq(1).css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald (index 0).</p> <p>Donald Duck (index 1).</p> <p>I live in Duckburg (index 2).</p> <p>My best friend is Mickey (index 3).</p> </body> </html>
متد ()filter
به ما این اجازه را می دهد تا از میان عناصر موجود تنها آن المان هایی که با معیار های مد نظر ما تطبیق دارند را انتخاب کنیم.
نمونه ی زیر تمامی عناصر
<p>
با class name " intro " را انتخاب می کند:
<!DOCTYPE html> <html> <head> </head> <body>Welcome to My Homepage
My name is Donald.
I live in Duckburg.
I love Duckburg.
My best friend is Mickey.
</body> </html>
متد ()not
متد ()not تمامی عناصری که با معیار تعریف شده منطبق نیستند را انتخاب می کند. متد مذکور در واقع از نظر عملکرد کاملا مخلاف متد ()filter می باشد.
مثال زیر تمامی المان های
<p>
که کلاس آن ها " intro " نیست را انتخاب می کند:
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> $(document).ready(function () { $("p").not(".intro").css("background-color", "yellow"); }); </script> </head> <body> <h1>Welcome to My Homepage</h1> <p>My name is Donald.</p> <p class="intro">I live in Duckburg.</p> <p class="intro">I love Duckburg.</p> <p>My best friend is Mickey.</p> </body> </html>