التابع .contents() في jQuery
.contents()
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التابع .contents() للحصول على العناصر الأبناء لكل عنصر من مجموعة العناصر المُطابِقة، بما في ذلك عقد النصوص والتعليقات.
.contents()
أضيفت في الإصدار: 1.2.
لا يقبل هذا التّابع أي وسائط.
يسمح لنا التّابع .contents()، من خلال إعطاء كائن jQuery يُمثِّل مجموعة عناصر DOM، أن نبحث خلال العناصر الأبناء المباشرين لها في شجرة DOM وأن نبني كائن jQuery جديد من العناصر المُطابِقة. إنّ التابعين .contents() و .children() متشابهان فيما عدا أنّ التّابع .contents() يُضمِّن العقد النصيّة وعقد التعليقات بالإضافة إلى عناصر HTML في كائن jQuery الناتج. لاحظ أنّ معظم العمليّات في jQuery لا تدعم العقد النصيّة وعقد التعليقات، والقليل منها التي تدعم ذلك تحتوي على ملاحظة واضحة مذكورة في صفحة التوثيق الخاصّة بها.
يُمكِن استخدام التّابع .contents() أيضًا في الحصول على محتوى المستند لعنصر الإطار <iframe> إن كان هذا العنصر يُشير إلى نفس المجال (domain) للصفحة الرئيسيّة.
فلنأخذ مثال عن عنصر <div> يحتوي على عدد من العقد النصيّة، والتي كل منها مفصولة بعنصري <br>:
<div class="container">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed
do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<br><br>
Ut enim ad minim veniam, quis nostrud exercitation ullamco
laboris nisi ut aliquip ex ea commodo consequat.
<br><br>
Duis aute irure dolor in reprehenderit in voluptate velit
esse cillum dolore eu fugiat nulla pariatur.
</div>
بإمكاننا توظيف التّابع .contents() للمساعدة على تحويل هذه المجموعة من النصوص إلى ثلاثة مقاطع مُرتّبة بشكل جيد:
$( ".container" )
.contents()
.filter(function() {
return this.nodeType === 3;
})
.wrap( "<p></p>" )
.end()
.filter( "br" )
.remove();
في البداية تسترجع هذه الشيفرة محتويات <div class="container"> ثمّ تُرشِّحها من أجل العقد النصيّة، والتي ستُغلَّف ضمن عناصر الفقرات <p>. يتم هذا عن طريق اختبار الخاصيّة .nodeType للعنصر. تحمل خاصيّة DOM هذه رمز عددي يُشير إلى نوع العقدة، تستخدم العقد النصيّة الرّمز 3. تُرشَّح المحتويات مرّة أخرى، هذه المرة لأجل العناصر <br>حيث تُزال هذه العناصر.
أمثلة
إيجاد كافّة العقد النصيّة بداخل الفقرات وتغليفها ضمن عنصر <b>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents مثال عن التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>مرحبًا <a href="https://johnresig.com/">جون</a>كيف حالك؟</p>
<script>
$( "p" )
.contents()
.filter(function(){
return this.nodeType !== 1;
})
.wrap( "<b></b>" );
</script>
</body>
</html>
تغيير لون خلفيّة الروابط بداخل عنصر <iframe> :
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>contents مثال عن التابع</title>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<iframe src="//api.jquery.com/" width="80%" height="600" id="frameDemo"></iframe>
<script>
$( "#frameDemo" ).contents().find( "a" ).css( "background-color", "#BADA55" );
</script>
</body>
</html>