در بخش قبلی با مفهوم عملکرد Traversing در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه پیمایش اجداد در جی کوئری را یاد می گیریم.
پیمایش اجداد در جی کوئری
جی کوئری چندین متد کارآمد مثل parent()
, parents()
, parentsUntil()
که به شما امکان پیمایش به بالا در درخت DOM را چه بصورت تنها یا چندین مرحله را به سادگی می دهد.
به این روش می توانید والد یا دیگر اجداد المان را بصورت سلسله مراتب بدست آورید.
متد parent() جی کوئری
متد parent()
در جی کوئری برای دریافت مستقیم والد المان انتخاب شده استفاده می شود.
مثال زیر والد مستقیم المان <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 27 28 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery parent() 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(){ $("li").parent().addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد parents() جی کوئری
متد parents()
در جی کوئری برای دریافت اجداد المان انتخاب شده استفاده می شود.
مثال زیر یک border را به اطراف المان های والد <li>
که <ul>
, <div>
, <body>
و <html>
می باشد, اضافه می کند.
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery parents() Demo</title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parents().addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
بطور اختیاری می توانید یک یا چند سلکتور را به عنوان پارامتر در متد parents()
به منظور فیلتر جستجوی اجداد, اضافه کنید.
مثال زیر border
را به تمام اجداد <li>
که المان های <div>
هستند, اضافه می کند.
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery parents() Demo</title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ var arr = $("li").parents("div").addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد parentsUntil() جی کوئری
متد parentsUntil()
در جی کوئری برای دریافت اجداد المان انتخاب شده استفاده می شود اما المان مچ شده توسط سلکتور را شامل نمی شود. به زبان ساده تر می توان گفت که همه اجداد المان ها که بین دو المان داده شده در سلسله مراتب DOM است را برگشت می دهد.
مثال زیر یک border
را به اطراف همه اجداد المان های <li>
بجز <html>
اضافه می کند.
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery parentsUntil() Demo</title> <style type="text/css"> *{ margin: 10px; } .frame{ border: 2px solid green; } </style> <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("li").parentsUntil("html").addClass("frame"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
امیدوارم در این بخش آموزش جی کوئری, از پیمایش اجداد در جی کوئری نهایت استفاده را برده باشید.
در قسمت بعد نحوه پیمایش فرزندان (children) در جی کوئری را آموزش خواهیم داد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
حسن جان متد closeset() که برای پیمایش والدها هست رو فراموش کردید
سلام. ممنون از توجه شما.
بله درست می فرمایید در بخش های مختلف پیمایش درختی متدهای اصلی را معرفی کردیم ولی اینجا از متد closeset() صحبتی نشده.
کار این متد برگشت دادن اولین والد المان سلکت شده است که همین کار را به اینصورت هم می توانید انجام بدیم :
$(‘li’).parents(‘ul:first’)
موفق باشید.