متد clone در جی کوئری

متد clone() یک نسخه کپی از عنصر یا عناصر انتخاب‌شده می‌سازد. این نسخه تا زمانی که آن را به بخشی از سند اضافه نکنید، فقط در حافظه وجود دارد و به‌تنهایی در صفحه دیده نمی‌شود. برای نمایش آن باید از متدهایی مانند appendTo()، prependTo() یا insertAfter() استفاده کنید.

نکته مهم این است که clone() به‌خودی‌خود عنصر را به ابتدای عنصر انتخاب‌شده اضافه نمی‌کند. این متد فقط کپی را می‌سازد؛ محل قرارگیری آن را متد دیگری تعیین می‌کند. برای مثال، appendTo() کپی را به انتهای مقصد اضافه می‌کند و prependTo() آن را در ابتدای مقصد قرار می‌دهد.

فرض کنید صفحه یک پاراگراف نمونه دارد و می‌خواهید با کلیک روی دکمه، نسخه دیگری از آن در بدنه صفحه ظاهر شود. ابتدا پاراگراف را انتخاب و کپی می‌کنید، سپس کپی را به مقصد می‌فرستید. این کار به‌خصوص برای محتوای تکرارشونده یا اجزایی که در زمان اجرا ساخته می‌شوند مفید است.

ساختار پایه متد ساده است و می‌توان آن را بدون آرگومان یا با یک مقدار بولی نوشت. مقدار این آرگومان مشخص می‌کند که رویدادها و داده‌های مرتبط با عنصر اصلی نیز به نسخه کپی‌شده منتقل شوند یا نه.

$(selector).clone(true|false)

در این ساختار، selector انتخابگر jQuery برای پیدا کردن عنصر یا مجموعه‌ای از عناصر است. مقدار true معمولاً برای کپی کردن رویدادهای متصل‌شده و داده‌های ذخیره‌شده نیز به کار می‌رود؛ مقدار false این موارد را منتقل نمی‌کند. اگر آرگومان حذف شود، رفتار پیش‌فرض معادل کپی بدون انتقال این داده‌ها است.

برای جلوگیری از ابهام، بهتر است مقدار موردنظر را آگاهانه انتخاب کنید. اگر فقط ظاهر و ساختار HTML لازم است، کپی ساده معمولاً کافی است. اما اگر عنصر اصلی رویدادی مانند کلیک دارد و انتظار دارید نسخه کپی‌شده نیز همان رفتار را اجرا کند، باید انتقال رویدادها را در نظر بگیرید.

پیش از استفاده از clone() باید مشخص کنید کدام عنصر قرار است کپی شود. انتخابگرهای گسترده ممکن است چندین عنصر را هم‌زمان انتخاب کنند و نتیجه‌ای بیشتر از انتظار بسازند. انتخاب یک کلاس اختصاصی یا شناسه مشخص، خوانایی کد را بالا می‌برد و احتمال تکثیر ناخواسته را کم می‌کند.

برای مثال، اگر فقط یک کارت محصول باید کپی شود، انتخاب همه عناصر div صفحه تصمیم مناسبی نیست. یک کلاس مانند .product-card انتخاب را هدفمندتر می‌کند. در صفحه‌ای که چندین کارت دارد، می‌توانید پیش از کپی‌کردن، عنصر موردنظر را با شرط یا انتخابگر دقیق‌تری پیدا کنید.

خروجی clone() یک مجموعه jQuery شامل کپی عنصر است. برای آن‌که کپی در صفحه نمایش داده شود، باید آن را به مقصد مشخصی اضافه کنید. انتخاب متد افزودن به نیاز شما بستگی دارد: قرار دادن در انتها، ابتدای مقصد یا کنار یک عنصر دیگر.

برای نمونه، کد زیر پس از کلیک روی دکمه، از پاراگراف‌های انتخاب‌شده یک نسخه می‌سازد و آن را به انتهای بدنه صفحه می‌فرستد. اگر مقصد دیگری مدنظر دارید، کافی است انتخابگر مقصد را تغییر دهید.

$("button").click(function() {
  $("p").first().clone().appendTo("body");
});

در این مثال از first() استفاده شده تا فقط نخستین پاراگراف انتخاب شود. بدون آن، اگر چند پاراگراف در صفحه وجود داشته باشد، همه آن‌ها کپی می‌شوند. بنابراین انتخاب مقصد و انتخاب عنصر مبدأ هر دو بر نتیجه نهایی اثر دارند.

به‌طور معمول، کپی عنصر شامل ساختار و ویژگی‌های HTML آن است؛ اما رویدادهایی که با روش‌هایی مانند click() مستقیماً به عنصر متصل شده‌اند، لزوماً همراه کپی منتقل نمی‌شوند. اگر نیاز دارید نسخه جدید نیز رویدادهای ثبت‌شده و داده‌های مرتبط را داشته باشد، آرگومان true را بررسی کنید.

برای مثال، اگر یک دکمه پس از بارگذاری صفحه رویداد کلیک دریافت کرده و سپس با clone() کپی شود، ممکن است دکمه کپی‌شده همان رفتار را نداشته باشد. این وضعیت به‌ویژه در رابط‌هایی که اجزا به‌صورت پویا افزوده می‌شوند، باعث سردرگمی می‌شود؛ بنابراین رفتار رویدادها را پس از افزودن کپی آزمایش کنید.

اگر عنصر اصلی ویژگی id داشته باشد، کپی معمولاً همان شناسه را نیز خواهد داشت. در HTML، شناسه باید در هر صفحه یکتا باشد. تکرار آن ممکن است باعث شود انتخابگرها، اسکریپت‌ها یا ابزارهای دسترس‌پذیری عنصر اشتباهی را هدف بگیرند.

فرض کنید کارت فرم دارای شناسه‌ای مانند form-1 است و آن را چند بار کپی می‌کنید. بهتر است برای هر نسخه شناسه جداگانه بسازید یا در ساختارهای تکرارشونده به‌جای شناسه، از کلاس استفاده کنید. اگر داخل عنصر برچسبی با ویژگی for وجود دارد، مقدار آن را هم با شناسه جدید هماهنگ کنید.

اگر هر بار کلیک، یک نسخه دیگر ساخته شود، تعداد عناصر صفحه پیوسته افزایش می‌یابد. گاهی این همان رفتار مطلوب است؛ اما اگر کاربر فقط باید یک نسخه ببیند، لازم است قبل از افزودن کپی، وضعیت صفحه را بررسی کنید یا پس از استفاده عنصر موقت را حذف کنید.

همچنین دقت کنید مبدأ کپی را از میان خروجی‌های قبلی انتخاب نکنید. در غیر این صورت ممکن است نسخه‌ای از عنصری بسازید که خود قبلاً کپی شده و محتوای تکراری یا تو در تو ایجاد کنید. انتخاب یک الگوی ثابت و جدا از محل نمایش، این مشکل را کاهش می‌دهد.

در مثال زیر، با کلیک روی دکمه، نخستین پاراگراف کپی شده و به انتهای بدنه صفحه افزوده می‌شود. استفاده از first() باعث می‌شود تنها یک پاراگراف به‌عنوان مبدأ انتخاب شود.

<button>کپی پاراگراف</button>
<p>این پاراگراف برای کپی شدن استفاده می‌شود.</p>

<script>
$("button").click(function() {
  $("p").first().clone().appendTo("body");
});
</script>

پس از کلیک، یک پاراگراف تازه در انتهای بدنه سند قرار می‌گیرد. برای افزودن آن به یک بخش مشخص، می‌توانید مقصد را به‌جای body با انتخابگر همان بخش جایگزین کنید. برای نمونه، استفاده از appendTo("#results") کپی را به انتهای عنصری با شناسه results می‌فرستد.

با clone() از یک عنصر موجود کپی می‌سازید؛ اما با روش‌هایی مانند $("<p>متن</p>") عنصر تازه‌ای را از رشته HTML ایجاد می‌کنید. انتخاب میان این دو روش به این بستگی دارد که آیا ساختار موردنیاز از قبل در صفحه وجود دارد یا باید بر اساس داده‌های جدید ساخته شود.

کپی‌کردن الگوی آماده برای اجزایی با ساختار ثابت، مانند کارت یا ردیف ساده، می‌تواند از تکرار نشانه‌گذاری جلوگیری کند. در مقابل، وقتی محتوای هر عنصر از داده‌های متفاوت می‌آید، ساخت عنصر جدید یا استفاده از قالب مناسب ممکن است خواناتر باشد. در هر دو حالت، باید مقصد، ویژگی‌های تکراری و نحوه اتصال رویدادها را بررسی کنید.

متد clone در jQuery برای ساخت نسخه‌ای از عناصر HTML موجود در صفحه به کار می‌رود. برای نمایش کپی، باید آن را با متدی مانند appendTo() به مقصد اضافه کنید؛ همچنین در صورت نیاز، می‌توانید انتقال رویدادها و داده‌ها را مشخص کنید.

پیش از استفاده، انتخابگر را محدود کنید، محل درج کپی را تعیین کنید و شناسه‌های تکراری را اصلاح کنید. با رعایت این نکات، کد قابل‌پیش‌بینی‌تری خواهید داشت و از ایجاد محتوای تکراری یا رفتارهای ناخواسته جلوگیری می‌کنید.

• عنصر مبدأ: با انتخابگر دقیق مشخص کنید چه چیزی کپی شود.
• محل درج: با متد مناسب، مقصد نسخه جدید را تعیین کنید.
• رویدادها: انتقال رویداد و داده را با توجه به نیاز بررسی کنید.
• شناسه‌ها: برای نسخه‌های کپی‌شده شناسه‌های یکتا در نظر بگیرید.