در بخش قبلی با پیمایش هم نیا در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه فیلتر عناصر در جی کوئری را یاد می گیریم.
فیلتر عناصر در جی کوئری
jQuery چندین متد مثل filter(), first(), last(), eq(), slice(), has(), not() و .. را برای محدود کردن جستجو برای عناصر در درخت DOM ارایه داده است.
متد first() جی کوئری
متد first() در جی کوئری برای فیلتر مجموعه ای از المان های همسان (matched) و برگشت دادن اولین از مجموعه استفاده می شود.
مثال زیر فقط اولین المان <li> از داخل <ul> را با افزودن کلاس .highlight هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery first() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").first().addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Last list item</li> </ul> </body> </html> |
متد last() جی کوئری
متد last() در جی کوئری برای فیلتر مجموعه ای از المان های همسان (matched) و برگشت دادن آخرین از مجموعه استفاده می شود.
مثال زیر فقط آخرین المان <li> از داخل <ul> را با افزودن کلاس .highlight هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery last() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").last().addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Last list item</li> </ul> </body> </html> |
متد eq() جی کوئری
متد eq() در جی کوئری برای فیلتر مجموعه ای از المان های همسان (matched) و برگشت دادن فقط یک عنصر از مجموعه که با شماره ایندکس مشخص شده است, استفاده می شود.
مثال زیر فقط دومین المان <li> از داخل <ul> را با افزودن کلاس .highlight هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery eq() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").eq(1).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Last list item</li> </ul> </body> </html> |
نکته: ایندکس عرضه شده به متد eq() اشاره به موقعیت شروع شده از ۰ است به این معنی که ایندکس ۰ اولین المان, ایندکس ۱ دومین المان و … است. همچنین ایندکس اشاره به موقعیت المان داخل آبجکت جی کوئری دارد نه داخل درخت DOM .
همچنین می توانید یک عدد منفی را مشخص کنید. عدد منفی اشاره به شروع موقعیت از آخر مجموعه به جای شروع آن را دارد. برای مثال eq(-2) آخرین عنصر دوم در مجموعه ای از عناصر همسان را نشان می دهد.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery eq() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").eq(-2).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
متد filter() جی کوئری
متد filter() در جی کوئری, سلکتور یا یک تابع را به عنوان آرگومان برای فیلتر مجموعه از عناصر (elements) همسان بر اساس یک شاخص مشخص, دریافت می کند.
سلکتور یا تابع مشخص شده در متد filter() در برابر هر یک از عناصر در مجموعه عناصر همسان و همه عناصری که با المان انتخاب شده است یا پاس دادن تابع تست که شامل نتیجه می شود, تست می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery filter() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").filter(":even").addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
همانطور که قبلا گفته شد می توانید یک تابع را به متد filter() برای فیلتر مجموعه از عناصر همسان بر اساس شرایط خاص, پاس بدید.
برای مثال ما هر المان <li> داخل <ul> را تست و المان های <li> که ایندکس عددی آنها فرد است را هایلایت می کنیم.
بنابراین در این مثال فقط دومین و چهارمین آیتم لیست بدلیل شروع شدن از ۰ هایلایت می شوند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery filter() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").filter(function(index){ return index % 2 !== 0; }).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Last list item</li> </ul> </body> </html> |
متد has() جی کوئری
متد has() در جی کوئری برای فیلتر مجموعه ای از عناصر همسان و برگشت دادن (return) المان هایی که دارای عناصر پسین هستند استفاده می شود.
مثال زیر همه المان های <li> که دارای <ul> هستند را هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery filter() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").has("ul").addClass("highlight"); }); </script> </head> <body> <ul> <li>Section 1</li> <li>Section 2</li> <li> <ul> <li>Section 2.1</li> <li>Section 2.2</li> <li>Section 2.3</li> </ul> </li> <li>Section 4</li> </ul> </body> </html> |
متد not() جی کوئری
متد not() در جی کوئری برای فیلتر مجموعه ای از عناصر همسان و برگشت دادن المان هایی که شرایط مشخص شده را ندارند استفاده می شود. این متد یک سلکتور یا تابع را به عنوان آرگومان دریافت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<title>jQuery not() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").not(":even").addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
متد not() همانند filter() می تواند یک تابع را به عنوان آرگومان بگیرد, اما کاملا برعکس متد filter() عمل می کند. به اینصورت که المان های پاس داده شده به تابع تست حذف شده و بقیه المان ها به عنوان نتیجه برگشت داده می شوند.
مثال زیر هر المان <li> داخل <ul> را تست و المان های <li> ای که ایندکس عددی آنها فرد نیز را هایلایت می کند.
در این مثال اولین و سومین آیتم از لیست هایلایت می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery not() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").not(function(index){ return index % 2 !== 0; }).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
متد slice() جی کوئری
متد slice() در جی کوئری, مجموعه ای از المان های همسان را در یک رنج مشخص شده فیلتر می کند.
این متد یک ایندکس عددی start (شروع) و end (پایان – آرگومان اختیاری) را دریافت می کند که start مشخص می کند که از چه موقعیتی المان ها انتخاب شوند و end نیز موقعیتی که انتخاب المان ها به پایان برسد را مشخص می کند.
مثال زیر اولین و دومین المان <li> داخل <ul> را با افزودن کلاس .highlight هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery slice() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").slice(0, 2).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
همچنین می توانید یک ایندکس عددی منفی را مشخص کنید. یک عدد منفی, موقعیت شروع را از آخر مجموعه به عقب در نظر می گیرد.
برای مثال, slice(-2, -1) از آنجا که فقط این آیتم در محدوده بین آن است, فقط سومین آیتم لیست را هایلایت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery slice() Demo</title> <style type="text/css"> .highlight{ background: yellow; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("ul li").slice(-2, -1).addClass("highlight"); }); </script> </head> <body> <ul> <li>First list item</li> <li>Second list item</li> <li>Third list item</li> <li>Fourth list item</li> </ul> </body> </html> |
امیدوارم در این بخش آموزش جی کوئری, از پیمایش هم نیا در جی کوئری نهایت استفاده را برده باشید.
در قسمت بعد Ajax در جی کوئری را آموزش خواهیم داد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
