متد children در جی کوئری

  • دسته بندی: آموزش جی کوئری
  • ۰ دیدگاه
  • منتشر شده در تاریخ
  • آپدیت شده در ۱۶دی, ۱۳۹۶
  • ۱ ستاره۲ ستاره۳ ستاره۴ ستاره۵ ستاره
متد children در جی کوئری

متد ()children

متد ()children در jquery, متد )(children اولین فرزند )تمامی زیرمجموعه های مستقیم( المان انتخابی را بازیابی می کند.
متد ذکر شده فقط یک سطح به سمت پایین در درخت DOM را پیمایش می کند.
در نمونه ی زیر همه ی المان هایی که فرزند مستقیم عنصر <div <هستند بازگردانی می شوند.

//<!DOCTYPE html>
//<html>
//<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").children().css({ "color": "red", "border": "2px solid red" });
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">
div (current element)
<p>
p (child)
<span>span (grandchild)</span>
</p>
<p>
p (child)
<span>span (grandchild)</span>
</p>
</div>
//</body>
//</html>

دقت داشته باشید که یک عنصر را تنها زمانی فرزند یا زیرمجموعه ی مستقیم عنصری دیگر می نامند که از
نظر سطح بین دو عنصر اختالفی وجود نداشته باشد؛ به عبارت دقیقتر بین دو عنصر مد نظر، عنصر دیگری
وجود نداشته باشد.
همچنین می توان با استفاده از یک پارامتر اختیاری جستجو به دنبال عناصر زیرمجموعه را محدود ساخت
)فیلتر کرد(.
نمونه ی زیر کلیه ی المان های <p <که شامل کالس “first “بوده و فزرندان مستقیم تگ <div<هستند را
برمی گرداند:

//<!DOCTYPE html>
//<html>
<head>
<style>
.descendants * {
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("div").children("p.first").css({ "color": "red", "border": "2px solid red" });
});
</script>
</head>
<body>
<div class="descendants" style="width:500px;">
div (current element)
<p class="first">
p (child)
<span>span (grandchild)</span>
</p>
<p class="second">
p (child)
<span>span (grandchild)</span>
</p>
</div>
//</body>
//</html>

صفحه بیسیک کده در اینستاگرام
مارا در اینستاگرام دنبال کنید
فالو می کنم
کانال تلگرام بیسیک کده
راهی آسانتر برای ارتباط با شما

پکیج های آموزشی

مطالب مرتبط

نظرات کاربران
  • درخواست شما پس از تایید در سایت نمایش داده می شود. از ارسال پرسش تکراری خودداری نمایید.
avatar
wpDiscuz