jQuery 3.3

.clone()




jquery

.clone ([withDataAndEvents]) إرجاع: jQuery

الوصف ؛: إنشاء نسخة عميقة من مجموعة من العناصر المتطابقة.

  • الإصدار المضاف: 1.0 .clone ([withDataAndEvents])

    • withDataAndEvents (افتراضي: false )
      اكتب: Boolean
      A Boolean تشير إلى ما إذا كان يجب نسخ معالجات الأحداث مع العناصر. اعتبارًا من jQuery 1.4 ، سيتم نسخ بيانات العنصر أيضًا.
  • الإصدار المضافة: 1.5 .clone ([withDataAndEvents] [، deepWithDataAndEvents])

    • withDataAndEvents (افتراضي: false )
      اكتب: Boolean
      A Boolean تشير إلى ما إذا كان يجب نسخ معالجات الأحداث والبيانات مع العناصر. القيمة الافتراضية هي false . * في jQuery 1.5.0 القيمة الافتراضية كانت صحيحة بشكل غير true ؛ تم تغييره إلى false في 1.5.1 وما فوق.
    • deepWithDataAndEvents (افتراضي: value of withDataAndEvents )
      اكتب: Boolean
      A Boolean يشير إلى ما إذا كان يجب نسخ معالجات الأحداث والبيانات الخاصة بكل أطفال العنصر المستنسخ. بشكل افتراضي تتطابق قيمته مع قيمة الوسيطة الأولى (التي تعد افتراضية إلى false ).

ينفذ الأسلوب .clone() نسخة عميقة من مجموعة العناصر المتطابقة ، مما يعني أنه ينسخ العناصر المتطابقة بالإضافة إلى جميع العناصر التابعة لها وعقد النص.

ملاحظة: لأسباب تتعلق بالأداء ، لا يتم نسخ الحالة الديناميكية لعناصر معينة من النموذج (على سبيل المثال ، بيانات المستخدم التي تم كتابتها في textarea واختيار المستخدمين التي تم اختيارها select ) إلى العناصر المستنسخة. عند استنساخ عناصر input ، يتم الاحتفاظ بالحالة الديناميكية للعنصر (على سبيل المثال ، بيانات المستخدم التي تم كتابتها في مدخلات النص واختيار المستخدمين التي تم إجراؤها في مربع اختيار) في العناصر المستنسخة.

عند استخدامه مع أحد أساليب الإدراج ، .clone() طريقة ملائمة لتكرار العناصر على الصفحة. خذ بعين الاعتبار HTML التالية:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

كما هو موضح في المناقشة لـ .append() ، عادةً عندما يتم إدراج عنصر ما في مكان ما في DOM ، فإنه يتم نقله من موقعه القديم. لذلك ، نظرًا للرمز:

$( ".hello" ).appendTo( ".goodbye" );

هيكل DOM الناتج سيكون:

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

لمنع هذا وإنشاء نسخة من العنصر بدلاً من ذلك ، يمكنك كتابة ما يلي:

$( ".hello" ).clone().appendTo( ".goodbye" );

هذا من شأنه أن ينتج:

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

ملاحظة: عند استخدام طريقة .clone() ، يمكنك تعديل العناصر المستنسخة أو محتوياتها قبل (إعادة) إدخالها في الوثيقة.

عادة ، لا يتم نسخ أية معالجات أحداث مرتبطة بالعنصر الأصلي إلى الاستنساخ. تسمح لنا المعلمة الاختيارية withDataAndEvents بتغيير هذا السلوك ، وبدلاً من ذلك ، قم بعمل نسخ من جميع معالجات الأحداث أيضًا ، مرتبطة بالنسخة الجديدة للعنصر. اعتبارًا من jQuery 1.4 ، يتم أيضًا نسخ جميع بيانات العناصر (المرفقة بواسطة طريقة .data() إلى النسخة الجديدة.

ومع ذلك ، لا يتم نسخ الكائنات والمصفوفات داخل بيانات العناصر وسيستمر مشاركتها بين العنصر المستنسخ والعنصر الأصلي. لإجراء نسخ عميق لكل البيانات ، انسخ كل نسخة يدويًا:

// Original element with attached data
var $elem = $( "#elem" ).data( "arr", [ 1 ] ),
    $clone = $elem.clone( true )
      // Deep copy to prevent data sharing
      .data( "arr", $.extend( [], $elem.data( "arr" ) ) );

اعتبارًا من jQuery 1.5 ، يمكن أن يتم تحسين withDataAndEvents بشكل اختياري مع deepWithDataAndEvents لنسخ الأحداث والبيانات لجميع الأطفال في العنصر المستنسخ.

ملاحظة: استخدام .clone() له تأثير جانبي لإنتاج عناصر ذات سمات معرّفة مكررة ، والتي من المفترض أن تكون فريدة. وحيثما أمكن ، من المستحسن تجنب استنساخ العناصر باستخدام هذه السمة أو استخدام سمات class كمعرِّفات بدلاً من ذلك.

مثال:

يستنسخ كل عناصر b (ويختار النسخ المستنسخة) ويضيفها إلى كل الفقرات.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>clone demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
 
<b>Hello</b><p>, how are you?</p>
 
<script>
$( "b" ).clone().prependTo( "p" );
</script>
 
</body>
</html>

عرض: