jQuery 3.3

.before()




jquery

.before (محتوى [، محتوى]) إرجاع: jQuery

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

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

    • يحتوى
      النوع: 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 before (function-html)

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

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

خذ بعين الاعتبار HTML التالية:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • قبل jQuery 1.9 ، .before() قد يحاول إضافة أو تغيير العقد في مجموعة 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>before demo</title>
  <style>
  p {
    background: yellow;
  }
  </style>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<p> is what I said...</p>
 
<script>
$( "p" ).before( "<b>Hello</b>" );
</script>
 
</body>
</html>

عرض:

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

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

عرض:

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

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

عرض: