پیدا کردن عناصر فرزند در جی کوئری
مسئله: فرض کنید که یک یا چند عنصر DOM را انتخاب کرده ایم و می خواهیم عناصر فرزند خاصی را درون محتوای این عناصر پیدا کنیم، راه حل چیست؟
راه حل: ما می توانیم با استفاده از متد ()find. عناصر فرزند را در درون محتوای یک یا چند عنصر انتخاب شده، پیدا کنیم و بر روی آنها کار خاصی را انجام دهیم. بعنوان مثال، فرض کنید که ما یک صفحه ی وب داریم که حاوی چندین پاراگراف است. در داخل این پاراگراف ها متنی وجود دارد که در آن از تگ <em> نیز استفاده شده است. حال اگر بخواهیم تنها عناصر <em> که در داخل عناصر <p> قرار دارند را انتخاب کنیم، با استفاده از متد find به صورت زیر عمل می کنیم:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
<p>Ut ad videntur facilisis <em>elit</em> cum. Nibh insitam erat facit <em>saepius</em> magna. Nam ex liber iriure et imperdiet. Et mirum eros iis te habent. </p>
<p>Claram claritatem eu amet dignissim magna. Dignissim quam elit facer erosillum. Et qui ex esse <em>tincidunt</em> anteposuerit. Nulla nam odio ii vulputate feugait.</p>
<p>In quis <em>laoreet</em> te legunt euismod. Claritatem <em>consuetudium</em> wisi sit velit facilisi.</p>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
//alerts total italic words found inside of <p> elements
alert('The three paragraphs in all contain ' + jQuery('p').find('em').length + 'italic words');
</script>
</body>
</html>ما می توانیم این کد را با دادن یک پارامتر دوم به تابع jQuery نیز انجام دهیم. مانند زیر:
alert('The three paragraphs in all contain ' + jQuery('em',$('p')).length + ' italic words');دو مثال بالا جنبه ی نمایشی دارند. و منطقی تر است که در صورت پارامتری نبودن، از یک سلکتور CSS برای انتخاب تمام عناصر فرزند یعنی <em> که در داخل عناصر <p> وجود دارند استفاده کنیم، مانند زیر:
alert('The three paragraphs in all contain ' + jQuery('p em').length + ' italic words');
توضیح مطلب
ما می توانیم از متد جی کوئری()find یک مجموعه ی جدید از عناصر را از عناصر DOM و فرزندان آنها ایجاد کنیم. اما کاربرد این متد معمولا با متد ()filter اشتباه گرفته می شود. ساده ترین راه برای به خاطر سپردن تفاوت این دو، این است که بدانید متد ()find عناصر فرزند درون یک مجموعه را انتخاب می کند و متد ()filter تنها بر روی عناصر مجموعه ی مورد نظر عمل می کند. متد find عناصر فرزند را برمی گرداند اما متد filter تنها مجموعه عناصر را فیلتر می کند.
- بازدید: 561
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.