التابع .after() في jQuery
after( content [, content ] ).
القيمة المعادة
كائن jQuery.
الوصف
يُستخدَم التّابع .after() لإدخال المحتوى المُحدَّد عن طريق المُعامِل بعد كل عنصر من مجموعة العناصر المُطابقة.
.after( content [, content ] )
أضيفت في الإصدار: 1.0.
content
سلسلة نصيّة من الكائن htmlString، أو عنصر، أو نص، أو مصفوفة، أو jQuery، وتُمثِّل سلسلة html، أو عنصر DOM، أو عقدة نصيّة (text node)، أو مصفوفة من العناصر والعقد النصيّة، أو كائن jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة.
content
سلسلة نصيّة من الكائن htmlString، أو عنصر، أو نص، أو مصفوفة، أو jQuery، وتُمثِّل عنصرًا إضافيًا واحدًا أو أكثر من عناصر DOM، أو العقد النصيّة (text node)، أو مصفوفات من العناصر والعقد النصية، أو سلسلة html، أو كائنات jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة.
.after( function )
أضيفت في الإصدار: 1.4.
function
دالة على الشكل Function( Integer index ) تُعيد سلسلة نصيّة من الكائن htmlString، أو عنصر أو عناصر DOM، أو عقدة أو عقد نصيّة، أو كائن jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة، يُمثِّل المعاملُ this العنصرَ الحالي. تستقبل فهرس موقع العنصر في المجموعة كوسيط لها.
.after( function-html )
أضيفت في الإصدار: 1.10.
function-html
دالة على الشكل Function( Integer index, String html ) تُعيد سلسلة نصيّة من الكائن htmlString، أو عنصر أو عناصر DOM، أو عقدة أو عقد نصيّة، أو كائن jQuery المطلوب إدخالها بعد كل عنصر من مجموعة العناصر المُطابقة. يُمثِّل المعاملُ this العنصرَ الحالي. تستقبل فهرس موقع العنصر في المجموعة وقيمة html القديمة للعنصر كوسائط لها.
يُنفِّذ التّابعان .after() و .insertAfter() نفس المهمّة. يكمن الفرق الأكبر بينهما في الصّياغة وتحديدًا في موضع المحتوى والهدف. حيث يأتي المحتوى المطلوب إدخاله في التّابع .after() من وسيط التّابع:
$(الهدف).after(المحتوى المطلوب إدخاله)
بينما في التّابع .insertAfter() يسبق المحتوى التابع، ويضاف بعد ذلك الهدف، والذي يُمرَّر كوسيط للتابع:
$(المحتوى المطلوب إدخاله).insertAfter(الهدف)
فلنأخذ مثال HTML التّالي:
<div class="container">
<h2>تحيّات</h2>
<div class="inner">مرحبًا</div>
<div class="inner">وداعًا</div>
</div>
من المُمكِن إنشاء وإدخال المحتوى بعد عدّة عناصر في نفس الوقت:
$( ".inner" ).after( "<p>تجربة</p>" );
يحصل كل عنصر <div> لديه الصّنف inner على هذا المحتوى الجديد:
<div class="container">
<h2>تحيّات</h2>
<div class="inner">مرحبًا</div>
<p>تجربة</p>
<div class="inner">وداعًا</div>
<p>تجربة</p>
</div>
يُمكِن اختيار عنصر ما في DOM وإدخاله بعد عنصر آخر:
$( ".container" ).after( $( "h2" ) );
إن اخترنا العنصر بهذه الطريقة وأدخلناه في مكان وحيد في DOM، فسيُنقَل إلى هذا المكان بدلًا من نسخه:
<div class="container">
<div class="inner">مرحبًا</div>
<div class="inner">وداعًا</div>
</div>
<h2>تحيّات</h2>
ملاحظة مهمة: إن كان هنالك أكثر من عنصر هدف فستُنشَأ نُسخة من العنصر المُدخَل من أجل كل عنصر هدف ما عدا العنصر الأخير.
تمرير دالة
يدعم التّابع .after() بدءًا من إصدار jQuery 1.4 تمرير دالّة له تُعيد العناصر المطلوب إدخالها:
$( "p" ).after(function() {
return "<div>" + this.className + "</div>";
});
يُدخِل المثال السّابق عنصر <div> بعد كلّ فقرة، مع احتواء عنصر <div> الجّديد على اسم صنف الفقرة التي تسبقه.
وسائط إضافية
يدعم التّابع .after() تمرير وسائط مُتعدِّدة كمُدخَلات له كما هو الحال مع توابع إضافة المحتوى الأخرى مثل .prepend() و .before()، من المُدخلات المدعومة عناصر DOM، وكائنات jQuery، وسلاسل HTML النصيّة، ومصفوفات مُكوَّنة من عناصر DOM.
يُدخِل المثال التّالي عنصري <div> جديدين وعنصر <div> موجود حاليًّا بعد الفقرة الأولى:
var $newdiv1 = $( "<div id='object1'></div>" ),
newdiv2 = document.createElement( "div" ),
existingdiv1 = document.getElementById( "foo" );
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );
بما أنّ التابع .after() يقبل أي عدد من الوسائط الإضافيّة، فمن المُمكِن تحقيق نفس النتيجة عن طريق تمرير ثلاثة عناصر <div> على شكل ثلاثة وسائط مختلفة، كما يلي:
$( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 )
يعتمد نوع وعدد الوسائط بشكل كبير على العناصر التي جُمِعَت في الشّيفرة.
ملاحظات إضافية
- قبل إصدار jQuery 1.9 كان التّابع
.after() يُحاوِل إضافة أو تغيير العُقَد في مجموعة jQuery الحاليّة إن لم تكن العقدة الأولى من المجموعة مُتصلة بمستند ما، وفي هذه الحالة يُعيد التّابع مجموعة jQuery جديدة بدلًا من المجموعة الأصليّة. قد يُعيد التّابع أو لا يُعيد نتيجة جديدة اعتمادًا على عدد وسائطه أو على التّرابط بينها. بدءًا من إصدار jQuery 1.9 تُعيد التّوابع.after()، و.before()، و .replaceWith() دومًا المجموعة الأصليّة غير المُعدّلة، وليس هنالك أي تأثير لاستخدام هذه التّوابع على عقدة لا تملك عنصر أب (parent) لها، فلن تُغيَّر المجموعة أو العقد التي تحتويها. - من تصميم jQuery أنّ الدوال البانية والتوابع الخاصّة بها والتي تقبل سلاسل HTML نصيّة - مثل
jQuery()، وappend().، و .after() - تملك القدرة على تنفيذ أي شيفرة، قد يحدث هذا عن طريق حقن العنصر<script>أو استخدام خاصيّات HTML التي تُنفِّذ الشيفرة (مثل <img onload="">). لا تستخدم هذه التّوابع لإدخال سلاسل نصيّة قادمة من مصادر غير موثوقة مثل مُعامِلات استعلام الرّوابط (URL query parameters)، أو الكعكات (cookies)، أو حقول الإدخال. يُؤدِّي فعل ذلك إلى ثغرات من نوع cross-site-scripting (اختصارًا XSS). قم بعمل إزالة أو تهريب للمحارف (escape) المُدخَلة بواسطة المستخدم قبل إضافة المحتوى للمستند.
أمثلة
إدخال شيفرة HTML بعد كل الفقرات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after مثال عن التابع</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>أرغب في أن أقول: </p>
<script>
$( "p" ).after( "<b>مرحبًا</b>" );
</script>
</body>
</html>
تجربة المثال:
أرغب في أن أقول:
مرحبًا
إدخال عنصر DOM بعد كل الفقرات:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after مثال عن التابع</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>أرغب في أن أقول: </p>
<script>
$( "p" ).after( document.createTextNode( "مرحبًا" ) );
</script>
</body>
</html>
تجربة المثال:
أرغب في أن أقول:
مرحبًا
إدخال كائن jQuery (مُشابِه لمصفوفة مُكوَّنة من عناصر DOM) بعد كل الفقرات <p>:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>after مثال عن التابع</title>
<style>
p {
background: yellow;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<b>مرحبًا</b>
<p>أرغب في أن أقول: </p>
<script>
$( "p" ).after( $( "b" ) );
</script>
</body>
</html>
تجربة المثال:
أرغب في أن أقول:
مرحبًا