به نام خدا

جلسه دوازدهم - پیمایش عناصر در جی‌کوئری (Traversing) بخش سوم

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

1. متد .children()

• کاربرد: انتخاب فرزندان مستقیم یک عنصر.
• ویژگی: فقط یک سطح پایین‌تر (فرزند مستقیم) را انتخاب می‌کند.
• مثال:

$("li.1").children(".child-1").css({ color: "red" });

در این مثال فقط المان‌های با کلاس .child-1 که فرزند مستقیم li.1 هستند، انتخاب و قرمز می‌شوند.

2. متد .find()

• کاربرد: جستجو در تمام فرزندان (مستقیم یا غیرمستقیم).
• ویژگی: تمام نسل‌های یک عنصر را جستجو می‌کند.
• مثال:

$("li").find(".child-1").css({ color: "red" });

در این مثال تمام .child-1 که در داخل li وجود دارند (حتی اگر چندین سطح پایین‌تر باشند) انتخاب و قرمز می‌شوند.

3. انتخاب همه فرزندان

• با استفاده از .find('*') می‌توان تمام عناصر داخل یک المان را انتخاب کرد.
• مثال:

$("li").find("*").css({ color: "red" });

در این مثال همه‌ی المان‌های داخل li قرمز می‌شوند.

جدول مقایسه .children() و .find()

$("selector").children("*")

$("selector").find("*")

$("ul").children(".item")

$("ul").find(".item")