در بخش قبلی با پیمایش فرزندان در جی کوئری آشنا شدیم. در این قسمت از سری آموزش جی کوئری, نحوه پیمایش هم نیا در جی کوئری را یاد می گیریم.
پیمایش هم نیا در جی کوئری
jQuery چندین متد مثل siblings()
, next()
, nextAll()
, nextUntil()
, prev()
, prevAll()
, prevUntil()
برای پیمایش طرفین در درخت DOM ارایه داده است.
متد siblings() جی کوئری
متد siblings()
در جی کوئری برای دریافت هم نیا المان های انتخاب شده استفاده می شود.
مثال زیر هم نیاهای المان <p>
که <h1>
و <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 siblings() 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(){ $("p").siblings().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> |
بطور اختیاری می توانید یک یا چند سلکتور را به عنوان پارامتر در متد siblings()
به منظور فیلتر جستجوی هم نیا ها, اضافه کنید.
مثال زیر border
را به تمام هم نیا های <p>
که المان های <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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery siblings() 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(){ $("p").siblings("ul").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> |
متد next() جی کوئری
متد next()
در جی کوئری برای دریافت هم نیایی که بلافاصله کنار المان های انتخاب شده است, استفاده می شود.
مثال زیر هم نیای المان <p>
که <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 next() 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(){ $("p").next().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> |
متد nextAll() جی کوئری
متد nextAll()
در جی کوئری برای دریافت تمام هم نیاهای بعد المان انتخاب شده استفاده می شود.
مثال زیر همه هم نیاهای المان <p>
بعد از آن می آیند را با افزودن کلاس .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 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery nextAll() 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(){ $("p").nextAll().addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <p>This is another paragraph.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد nextUntil() جی کوئری
متد nextUntil()
در جی کوئری برای دریافت تمام هم نیاهای بالا را که شامل المان مچ شده توسط سلکتور نیست استفاده می شود.
به زبان ساده تر تمام المان های هم نیا (خواهر و برادری) بعدی را که بین دو المان داده شده در یک سلسله مراتب DOM است را برگشت می دهد.
مثال زیر همه المان های خواهر و برداری المان <h1>
را بجز <ul>
هایلایت می کند که در این مثال هر دو <p>
را هایلایت خواهد کرد.
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery nextUntil() 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(){ $("h1").nextUntil("ul").addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <p>This is another paragraph.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد prev() جی کوئری
متد prev()
در جی کوئری برای دریافت هم نیایی که بلافاصله قبل از المان های انتخاب شده است, استفاده می شود.
مثال زیر هم نیای المان < ul>
که <p>
است را با افزودن کلاس .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 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery prev() 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").prev().addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <p>This is another paragraph.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد prevAll() جی کوئری
متد prevAll()
در جی کوئری برای دریافت تمام هم نیاهای قبل المان انتخاب شده استفاده می شود.
مثال زیر همه هم نیاهای المان <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 29 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery prevAll() 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").prevAll().addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <p>This is another paragraph.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
متد prevUntil() جی کوئری
متد prevUntil()
در جی کوئری برای دریافت تمام هم نیاهای قبل به بالا را که شامل المان مچ شده توسط سلکتور نیست استفاده می شود.
به زبان ساده تر تمام المان های هم نیا (خواهر و برادری) قبل المان را که بین دو المان داده شده در یک سلسله مراتب DOM است را برگشت می دهد.
مثال زیر همه المان های خواهر و برداری قبل المان <ul>
را بجز <h1>
هایلایت می کند که در این مثال هر دو <p>
را هایلایت خواهد کرد.
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 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>jQuery prevUntil() 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").prevUntil("h1").addClass("highlight"); }); </script> </head> <body> <div class="container"> <h1>Hello World</h1> <p>This is a <em>simple paragraph</em>.</p> <p>This is another paragraph.</p> <ul> <li>Item One</li> <li>Item Two</li> </ul> </div> </body> </html> |
امیدوارم در این بخش آموزش جی کوئری, از پیمایش هم نیا در جی کوئری نهایت استفاده را برده باشید.
در قسمت بعد نحوه فیلتر عناصر در جی کوئری را آموزش خواهیم داد.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق باشید
کاش برای هر قسمت دمو هم میزاشتید
متاسفانه این قسمت در سایت فعال نیست و میتونید جداگانه هر کدام رو کپی و اجرا بگیرید.