jQuery 3.3

.after()




jquery

.after (content [، content]) الإرجاع: jQuery

الوصف: أدخل المحتوى ، المحدد بواسطة المعلمة ، بعد كل عنصر في مجموعة العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .after (المحتوى [، المحتوى])

    • يحتوى
      النوع: htmlString أو Element أو Text أو Array أو jQuery
      سلسلة HTML ، أو عنصر DOM ، أو عقدة نصية ، أو مجموعة من العناصر ، أو عقد نصية ، أو كائن jQuery لإدراجه بعد كل عنصر في مجموعة العناصر المتطابقة.
    • يحتوى
      النوع: htmlString أو Element أو Text أو Array أو jQuery
      عنصر واحد أو أكثر من عناصر DOM الإضافية أو عقد النص أو صفائف العناصر وعقد النص أو سلاسل HTML أو كائنات jQuery لإدراجها بعد كل عنصر في مجموعة العناصر المتطابقة.
  • الإصدار المضافة: 1.4 .بعد (وظيفة)

    • وظيفة
      النوع: Function (فهرس Integer ) => htmlString أو Element أو Text أو jQuery
      دالة تقوم بارجاع سلسلة HTML ، عنصر (عناصر) DOM ، عقدة (نصوص) النص ، أو كائن jQuery لإدراجه بعد كل عنصر في مجموعة العناصر المتطابقة. يستقبل موضع فهرس العنصر في المجموعة كوسيطة. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.
  • الإصدار المضاف: 1.10 بعد (function-html)

    • الوظائف أتش تي أم أل
      النوع: Function (فهرس Integer ، String html) => htmlString أو Element أو Text أو jQuery
      دالة تقوم بارجاع سلسلة HTML ، عنصر (عناصر) DOM ، عقدة (نصوص) النص ، أو كائن jQuery لإدراجه بعد كل عنصر في مجموعة العناصر المتطابقة. يستقبل موضع فهرس العنصر في المجموعة وقيمة HTML القديمة للعنصر كوسيط. داخل الدالة ، يشير this إلى العنصر الحالي في المجموعة.

تنفيذ .after() و أساليب .insertAfter() نفس المهمة. الاختلاف الرئيسي في بناء الجملة - على وجه التحديد ، في وضع المحتوى والهدف. مع .after() ، يأتي المحتوى المطلوب إدراجه من وسيطة الطريقة: $(target).after(contentToBeInserted) . مع .insertAfter() ، من ناحية أخرى ، يسبق المحتوى الأسلوب ثم يتم إدراجه بعد الهدف ، والذي يتم تمريره بدوره .insertAfter() أسلوب .insertAfter() : $(contentToBeInserted).insertAfter(target) .

باستخدام HTML التالي:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>

يمكن إنشاء المحتوى ثم إدراجه بعد عدة عناصر في وقت واحد:

$( ".inner" ).after( "<p>Test</p>" );

يحصل كل عنصر <div> داخلي على هذا المحتوى الجديد:

<div class="container">
  <h2>Greetings</h2>
  <div class="inner">Hello</div>
  <p>Test</p>
  <div class="inner">Goodbye</div>
  <p>Test</p>
</div>

يمكن أيضًا تحديد عنصر في DOM وإدراجه بعد عنصر آخر:

$( ".container" ).after( $( "h2" ) );

إذا تم إدراج عنصر تم اختياره بهذه الطريقة في مكان واحد في مكان آخر في DOM ، فسيتم نقله بدلاً من استنساخه:

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
<h2>Greetings</h2>

هام : إذا كان هناك أكثر من عنصر هدف واحد ، فسيتم إنشاء نسخ مستنسَخة للعنصر المدرج لكل هدف باستثناء آخر عنصر.

تمرير وظيفة

اعتبارًا من jQuery 1.4 ، يدعم .after() تمرير دالة تقوم بإرجاع العناصر لإدراجها.

$( "p" ).after(function() {
  return "<div>" + this.className + "</div>";
});

يقوم هذا المثال بإدراج <div> بعد كل فقرة ، مع كل <div> يحتوي على اسم (أسماء) الفئة للفقرة السابقة.

الحجج الإضافية

كما هو الحال مع أساليب إضافة المحتوى الأخرى مثل .prepend() و .before() ، يدعم .after() أيضًا تمرير وسيطات متعددة كإدخال. تتضمن المدخلات المدعومة عناصر DOM ، وعناصر jQuery ، وسلاسل HTML ، ومصفوفات عناصر DOM.

على سبيل المثال ، سوف يقوم التالي بإدراج جهازي <div> s جديد و <div> موجود بعد الفقرة الأولى:

var $newdiv1 = $( "<div id='object1'></div>" ),
  newdiv2 = document.createElement( "div" ),
  existingdiv1 = document.getElementById( "foo" );
 
$( "p" ).first().after( $newdiv1, [ newdiv2, existingdiv1 ] );

بما أن .after() يمكن أن يقبل أي عدد من الوسيطات الإضافية ، فإن النتيجة نفسها يمكن تحقيقها بالتمرير في ثلاث <div> s $( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 ) وسيطات منفصلة ، مثل: $( "p" ).first().after( $newdiv1, newdiv2, existingdiv1 ) . يعتمد نوع وسيطة الوسائط إلى حد كبير على العناصر التي تم تجميعها في التعليمة البرمجية.

ملاحظات إضافية:

  • قبل jQuery 1.9 ، يحاول .after() إضافة أو تغيير العقد في مجموعة jQuery الحالية إذا لم تكن العقدة الأولى في المجموعة متصلة بمستند ، وفي هذه الحالات ، قم بإرجاع مجموعة jQuery جديدة بدلاً من المجموعة الأصلية. ربما تكون هذه الطريقة قد عادت أو لم تعيد نتيجة جديدة اعتمادا على عدد أو اتصال الحجج! بدءًا من jQuery 1.9 ، فإن .after() و .before() و .replaceWith() دائمًا .replaceWith() المجموعة الأصلية غير المعدلة. محاولة استخدام هذه الطرق على عقدة بدون أحد الوالدين ليس لها أي تأثير - أي ، لا يتم تغيير المجموعة ولا العقد التي تحتويها.
  • حسب التصميم ، يمكن لأي منشئ jQuery أو الطريقة التي تقبل سلسلة HTML - jQuery() ، .append() ، .after() ، إلخ - تنفيذ .append() برمجية. يمكن أن يحدث هذا عن طريق حقن علامات البرنامج النصي أو استخدام سمات HTML التي تقوم بتنفيذ التعليمات البرمجية (على سبيل المثال ، <img onload=""> ). لا تستخدم هذه الطرق لإدراج سلاسل تم الحصول عليها من مصادر غير موثوقة مثل معلمات استعلام URL أو ملفات تعريف الارتباط أو مدخلات النموذج. يمكن القيام بذلك تقديم الثغرات الأمنية عبر المواقع (XSS). أزل أو تخلص من أي إدخال للمستخدم قبل إضافة محتوى إلى المستند.

أمثلة:

يدرج بعض HTML بعد كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).after( "<b>Hello</b>" );
</script>
 
</body>
</html>

عرض:

لإدراج عنصر DOM بعد كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p>I would like to say: </p>
 
<script>
$( "p" ).after( document.createTextNode( "Hello" ) );
</script>
 
</body>
</html>

عرض:

إدراج كائن jQuery (مشابهًا لمجموعة عناصر DOM) بعد كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>after demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Hello</b>
<p>I would like to say: </p>
 
<script>
$( "p" ).after( $( "b" ) );
</script>
 
</body>
</html>

عرض: