clone()

.clone( [ withDataAndEvents ] )

מחזירה: jQuery

תיאור: יוצר עותק מלא של רשימת אלמנטים בהתאמה.

.clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )

הוספה בגרסה: 1.5

withDataAndEvents

ערך בולאני, המציין האם יחד עם אלמנטים יש להעתיק מטפל האירוע. ערך ברירת מחדל false. *ב 1.5.0 ערך ברירת מחדל בטעות מוגדר כי true. זה יתוקן חזרה ל false ב 1.5.1 ומתקדם יותר.

deepWithDataAndEvents

ערך בולאני

ערך בולאני, המציין האם מטפלי אירועים ונתונים עבור כל הילדים של אלמנט משובט צריכים להיות מועתקים. כברירת מחדל ערכו תואם לערך של ארגומנט הראשונה (אשר בברירת מחדל הוא false).

.clone( [ withDataAndEvents ] )

הוספה בגרסה: 1.0

withDataAndEvents

ערך בולאני

ערך בולאני, המציין האם יחד עם אלמנטים יש להעתיק מטפל האירוע.החל מ-jQuery 1,4 אלמנט של הנתונים גם יועתק.

שיטה .clone() מבצעת העתקה מלאה של רשימת האלמנטים בהתאמה, כלומר, היא מעתיקה אלמנטים בהתאמה, וגם צאצאהים של אלמנטים האלה וצמתי טקסט. כאשר נעשה שימוש ביחד עם אחת מהשיטות ההכנסה, .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()) גם מעותקים לעותק חדש.

עם זאת, אובייקטים ומערכים בתוך האלמנט נתונים אינם מועתקים וממשיכים להיות משותפים בין אלמנט המשוכפל ואלמנט המקורי. כדי להעתיק את כל הנתונים לעומק, תהעתיקו כל אחד ידנית:

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

החל מ jQuery 1.5,שwithDataAndEvents ניתן להרחיב עם deepWithDataAndEvents כדי להעתיק את האירועים ואת הנתונים עבור כל הילדים של אלמנט משובט.

דוגמאות

דוגמה 1

משובט כל אלמנטים b (ובוחר את שיבוטים) ומוסיף אותם לכל הפסקאות, לפני הפסקאות.

$("b").clone().prependTo("p");

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 1 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
$("b").clone().prependTo("p");
  });
  </script>
</head>
<body>
  <b>Hello</b><p>, how are you?</p>
</body>
</html>

נסה זאת בעצמך

דוגמה 2

מייצר כפתור שמסוגל לשבט את עצמו ( משבטים גם יכולים לשבט את עצמם )

    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });

תוצאת הפעלה קוד לעיל:

נסה זאת בעצמך

דוגמה 2 - קוד מלא:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>  
  <script>
  $(document).ready(function(){
    $("button").click(function(){
      $(this).clone(true).insertAfter(this);
    });
  });
  </script>
</head>
<body>
  <button>Clone Me!</button>
</body>
</html>

נסה זאת בעצמך

האם מידע זה היה מועיל?

כן לא

clone()

.clone( [ withDataAndEvents ] )

.clone( [ withDataAndEvents ], [ deepWithDataAndEvents ] )

.clone( [ withDataAndEvents ] )

דוגמאות

דוגמה 1

דוגמה 1 - קוד מלא:

דוגמה 2

דוגמה 2 - קוד מלא:

תגובות