اجداد (Ancestors)
اینجا با مفهوم پیمایش اجداد DOM در jQuery آشنا می شوی. یعنی از یک عنصر شروع می کنی و فقط رو به بالا حرکت می کنی. مثل وقتی که از خودت شروع می کنی و می رسی به پدر، مادربزرگ و بقیه فامیل.
اجداد درخت DOM در jQuery چیست؟
DOM یا Document Object Model نقشه درختی صفحه است. هر تگ یک گره در این درخت است. اجداد (Ancestors) یعنی همه گره هایی که بالای یک گره هستند؛ مثل والد، پدربزرگ و بالاتر.
در پیمایش اجداد DOM ما فقط رو به بالا می رویم. از عنصر فعلی شروع می کنیم و بین تگ های بالاتر می گردیم. این کار کمک می کند راحت تر ساختار صفحه را کنترل کنیم.
اگر قبلاً صفحه پیمایش در صفحه (Traversing) را دیده ای، این درس ادامه همان مسیر است. این بار تمرکز فقط روی اجداد است، نه فرزندان و خواهر-برادرها.
متد parent() برای والد مستقیم
متد parent() در jQuery فقط یک سطح بالا می رود. یعنی والد مستقیم عنصر را برمی گرداند. مثل این که فقط پدر یا مادر خودت را صدا بزنی، نه کل فامیل را.
در منبع، مثال زیر والد مستقیم هر تگ <span> را برمی گرداند:
$(document).ready(function() {
$("span").parent();
});
در این کد، اول منتظر می مانیم صفحه آماده شود. بعد همه <span>ها را می گیریم و روی هرکدام متد parent() را صدا می زنیم. نتیجه مجموعه ای از والدهای مستقیم همین spanها است.
نکته: parent() همیشه فقط یک طبقه بالا می رود. حتی اگر بالاتر هم اجداد دیگر باشند، آن ها را نمی گیرد.
متد parents() برای همه اجداد
متد parents() برعکس parent() فقط به یک سطح راضی نیست. این متد همه اجداد را بالا می رود تا برسد به ریشه صفحه؛ یعنی تگ <html>. شبیه وقتی که می خواهی کل شجره نامه خانوادت را ببینی.
مثال اول، همه اجداد هر <span> را برمی گرداند:
$(document).ready(function() {
$("span").parents();
});
اینجا هر span تمام تگ های بالای خودش را می بیند؛ از والد شروع می شود و می رود بالا تا ریشه. نتیجه می تواند شامل <li>، <ul>، <div> و در آخر <html> باشد.
حالا یک قابلیت جذاب داریم. می توانیم با یک پارامتر، لیست اجداد را فیلتر کنیم. یعنی فقط اجدادی را نگه داریم که یک تگ خاص هستند.
در مثال زیر، فقط اجداد از نوع <ul> گرفته می شوند:
$(document).ready(function() {
$("span").parents("ul");
});
الان jQuery همه اجداد را بالا می رود. اما فقط آن هایی که تگ <ul> هستند در نتیجه می مانند. مثل اینکه بگویی از کل فامیل فقط عموها را نشان بده.
متد parentsUntil() برای محدوده اجداد
متد parentsUntil() کمی دقیق تر کار می کند. این متد اجداد را می گیرد، اما فقط بین دو نقطه. یعنی از عنصر شروع می کند و بالا می رود، ولی وقتی به یک تگ مشخص رسید، همان جا متوقف می شود.
در منبع، این مثال اجداد بین <span> و <div> را برمی گرداند:
$(document).ready(function() {
$("span").parentsUntil("div");
});
اینجا از span شروع می شود و اجداد را می گیرد تا برسد به یک div. خود div در نتیجه نیست، اما همه اجداد قبل از آن هستند. مثل این است که بگویی فامیل ها را لیست کن، از من تا پدربزرگ، ولی خود پدربزرگ را ننویس.
نکته: parentsUntil() برای وقتی خوب است که بین دو لایه خاص درخت DOM دنبال عناصر می گردی و نمی خواهی کل مسیر را بگیری.
چطور مرحله به مرحله اجداد را پیدا کنیم؟
برای تمرین پیمایش اجداد DOM می توانی یک بخش ساده صفحه را انتخاب کنی. مثلاً یک منو یا یک باکس خبر. سپس این مراحل را انجام بده:
- یک عنصر شروع انتخاب کن؛ مثلاً یک <span> داخل منو.
- با parent() فقط والد مستقیمش را بررسی کن.
- با parents() همه اجدادش را ببین و تفاوت را حس کن.
- با parents("ul") فقط اجداد از نوع لیست را بگیر.
- با parentsUntil("div") فقط اجداد تا نزدیک ترین div را بررسی کن.
بعد از این تمرین، ساختار صفحه برایت شفاف تر می شود. در درس بعدی می توانی سراغ فرزندان (Descendants) بروی و حرکت رو به پایین را هم تمرین کنی.
جمع بندی سریع
- پیمایش اجداد DOM یعنی حرکت رو به بالا در درخت صفحه.
- متد parent() فقط والد مستقیم را برمی گرداند.
- متد parents() همه اجداد را تا ریشه سند می گیرد.
- می توانی با parents(selector) اجداد را فیلتر کنی.
- متد parentsUntil() اجداد بین عنصر و یک تگ مشخص را برمی گرداند.