پیمایش (Traversing) در jQuery

پیمایش (Traversing) در jQuery به معنای حرکت در درخت DOM برای یافتن، انتخاب و تغییر عناصر HTML است. jQuery متدهای متعددی برای پیمایش عناصر فرزند (Children)، والد (Ancestors) و هم‌سطح (Siblings) ارائه می‌دهد.

۱. پیمایش به سمت اجداد (Ancestors)

این متدها برای یافتن والد یا اجداد یک عنصر استفاده می‌شوند.

🔹 `parent()` – انتخاب والد مستقیم یک عنصر

$(document).ready(function(){

$(“span”).parent().css(“border”, “2px solid red”);

});

✅ فقط یک سطح بالاتر (والد مستقیم) را انتخاب می‌کند.

🔹 `parents()` – انتخاب تمام اجداد یک عنصر

$(document).ready(function(){

$(“span”).parents().css(“border”, “2px solid blue”);

});

✅ تمام والدها و اجداد را تا <html> انتخاب می‌کند.

🔹 parentsUntil(selector) – انتخاب اجداد تا یک عنصر خاص

$(document).ready(function(){

$(“span”).parentsUntil(“body”).css(“border”, “2px solid green”);

});

✅ تمامی والدها بین عنصر انتخاب‌شده و عنصر مشخص‌شده را انتخاب می‌کند، اما خود عنصر مشخص‌شده را شامل نمی‌شود.

۲. پیمایش به سمت فرزندان (Descendants)

متدهایی برای یافتن فرزندان یک عنصر.

🔹 `children()` – انتخاب فرزندان مستقیم

$(document).ready(function(){

$(“div”).children().css(“border”, “2px solid purple”);

});

✅ فقط فرزندان مستقیم را انتخاب می‌کند.

🔹 `find(selector)` – انتخاب تمامی فرزندان در تمام سطوح

$(document).ready(function(){

$(“div”).find(“span”).css(“color”, “red”);

});

✅ تمامی فرزندان در هر سطحی از درخت DOM را که مطابق با انتخاب‌گر (selector) باشند، انتخاب می‌کند.

۳. پیمایش به سمت هم‌سطح‌ها (Siblings)

متدهایی برای یافتن عناصر هم‌سطح (عناصری که یک والد مشترک دارند).

🔹 `siblings()` – انتخاب تمام عناصر هم‌سطح

$(document).ready(function(){

$(“h2”).siblings().css(“background-color”, “yellow”);

});

✅ تمام عناصر هم‌سطح (به غیر از خود عنصر انتخاب‌شده) را انتخاب می‌کند.

🔹 `next()` – انتخاب عنصر بعدی

$(document).ready(function(){

$(“h2”).next().css(“color”, “blue”);

});

✅ فقط عنصر هم‌سطح بعدی را انتخاب می‌کند.

🔹 `prev()` – انتخاب عنصر قبلی

$(document).ready(function(){

$(“h2”).prev().css(“color”, “green”);

});

✅ فقط عنصر هم‌سطح قبلی را انتخاب می‌کند.

🔹 `nextAll()` و `prevAll()` – انتخاب همه عناصر بعدی یا قبلی

$(document).ready(function(){

$(“h2”).nextAll().css(“border”, “1px solid red”);

});

✅ nextAll() همه عناصر هم‌سطح بعد از عنصر انتخاب‌شده را انتخاب می‌کند.

$(document).ready(function(){

$(“h2”).prevAll().css(“border”, “1px solid green”);

});

✅ prevAll() همه عناصر هم‌سطح قبل از عنصر انتخاب‌شده را انتخاب می‌کند.

🔹 `nextUntil(selector)` و `prevUntil(selector)`

$(document).ready(function(){

$(“h2”).nextUntil(“p”).css(“background”, “lightgray”);

});

✅ nextUntil("p") همه عناصر بعد از h2 را تا رسیدن به p انتخاب می‌کند، اما p را شامل نمی‌شود.

۴. فیلتر کردن عناصر (Filtering)

گاهی نیاز داریم عناصر را بر اساس یک شرط خاص انتخاب کنیم.

🔹 `first()` – انتخاب اولین عنصر از مجموعه

$(document).ready(function(){

$(“div p”).first().css(“color”, “blue”);

});

🔹 last() – انتخاب آخرین عنصر از مجموعه

$(document).ready(function(){

$(“div p”).last().css(“color”, “red”);

});

🔹 `eq(index)` – انتخاب یک عنصر مشخص از مجموعه

$(document).ready(function(){

$(“ul li”).eq(2).css(“background”, “yellow”);

});

✅ عنصر با ایندکس ۲ را انتخاب می‌کند (ایندکس‌ها از ۰ شروع می‌شوند).

🔹 `filter(selector)` – انتخاب عناصر بر اساس شرط

$(document).ready(function(){

$(“p”).filter(“.highlight”).css(“border”, “2px solid orange”);

});

✅ فقط عناصری که دارای کلاس highlight هستند را انتخاب می‌کند.

🔹 `not(selector)` – حذف عناصر از انتخاب

$(document).ready(function(){

$(“p”).not(“.exclude”).css(“color”, “green”);

});

✅ تمام **p**ها را انتخاب می‌کند، به جز آن‌هایی که کلاس exclude دارند.

جمع‌بندی

✅ در jQuery، پیمایش (Traversing) به شما اجازه می‌دهد که به والدها، فرزندان و هم‌سطح‌ها دسترسی داشته باشید.
✅ متدهای مختلفی مانند parent()، children()، siblings()، next() و filter() برای انتخاب و تغییر عناصر وجود دارند.

پیمایش (Traversing) در jQuery