با عرض سلام و وقت بخیر خدمت کاربران سایت پی وی لرن . و کاربرانی که دوره کامل آموزش jQuery ، را دنبال می کنند. در بخش های قبلی تاکنون ، وارد مبحث پیمایش درخت DOM در تکنیک Traversing، شدیم. و به برخی از توابع آن نیز ، اشاره کردیم. اکنون در ادامه آن مباحث، در این بخش قصد داریم به مبحث عناصر خواهر و برادر در Traversing در jQuery ، بپردازیم.
همانطور که اشاره کردیم. بعد از ارائه مفاهیم اولیه تکنیک Traversing ، در ادامه به پیمایش درخت DOM، پرداخته ایم. و چگونگی بدست آوردن عناصر والد و پیمایش پایین درخت برای بدست آوردن عناصر فرزند، را بررسی کردیم.
اکنون در ادامه ی مباحث فصل، به موضوع عناصر خواهر و برادر یا siblings در Traversing در jQuery ، می پردازیم.
در jQuery ، می توانید در سطحی که عنصری انتخاب شده است. پیمایش کرده و عناصر خواهر و برادر عنصر انتخاب شده را برگردانید.
این روش پیدا کردن عناصر خواهر و برادر یک عنصر ، Siblings نام دارد.
توابعی که برای پیمایش در سطح جاری درخت DOM، و برگرداندن عناصر خواهر و برادر ، ارائه شده است، شامل موارد زیر است:
تابع ()siblings ، تمام عناصر خواهر و برادر عنصر انتخاب شده را برمی گرداند.
مثال زیر ، چگونگی پیدا کردن عناصر خواهر و برادر عنصر <h2>
، را به خوبی نشان می دهد:
1 2 3 | $(document).ready(function(){ $("h2").siblings(); }); |
شما همچنین می توانید، از پارامترهای گزینشی ، برای فیلتر کردن عناصر خواهر و برادر، عنصر انتخاب شده ، استفاده کنید.
در مثال زیر ، تمام عناصر خواهر و برادر عنصر <h2>
،که شامل عنصر <p>
، می شود. برگردانده می شود:
1 2 3 | $(document).ready(function(){ $("h2").siblings("p"); }); |
از تابع ()next ، برای پیدا کردن اولین عنصر خواهر و برادر ، عنصر انتخاب شده، استفاده می شود.
مثال زیر ، چگونگی برگرداندن اولین عنصر خواهر و برادر عنصر <h2>
، را بخوبی نشان می دهد:
1 2 3 | $(document).ready(function(){ $("h2").next(); }); |
تابع ()nextAll ، تمام عناصر خواهر برادر عنصر انتخاب شده، که بعد از آن قرار دارند، را برمی گرداند.
این مثال چگونگی برگرداندن تمام عناصر خواهر و برادر عنصر <h2>
، که بعد از آن عنصر، قرار دارند را ، بخوبی نشان می دهد:
1 2 3 | $(document).ready(function(){ $("h2").nextAll(); }); |
تابع ()nextUntil ،تمام عناصر خواهر برادر عنصر انتخاب شده را، که بین دو عنصر مشخص شده قرار دارند، برمی گرداند.
مثال زیر چگونگی برگرداندن عناصر خواهر و برادر عنصر انتخاب شده که، بین دو عنصر <h2>
و <h6>
، قرار دارند را نشان می دهد:
1 2 3 | $(document).ready(function(){ $("h2").nextUntil("h6"); }); |
توابع ()prev() ، prevAll و ()prevUntil ، بسیار شبیه به سایر توابعی که در این بخش به آن اشاره شده ، عمل می کنند. تنها تفاوت این توابع در این است که، توابع قبلی عناصر خواهر و برادری که بعد از عنصر جاری، قرار داشتند را بر می گرداند. اما این توابع برعکس آنها عمل می کنند. یعنی عناصر خواهر و برادری که قبل از عنصر جاری، قرار دارند، را بر می گرداند.
تا این بخش از آموزشهای این فصل، چگونگی پیمایش در طول درخت DOM ، و پیدا کردن عناصر والد و فرزند را ارائه کردیم. در تکمیل همین مباحث ، در این بخش نیز، روشهای برگرداندن عناصر خواهر و برادر عنصر انتخاب شده را ، در قالب موضوع عناصر خواهر و برادر یا siblings در Traversing در jQuery ، ارائه کردیم.