به کارگاه ترجمه ی سینا2 خوش آمدید!

تبلیغات شما در اینجا بالا

کپی کردن عناصر DOM در جی کوئری

مسئله

ما می خواهیم یک بخش از کدهای DOM را کپی(clone/copy) کنیم.


راه حل

جی کوئری یک متد به نام clone() به ما ارائه می دهد که به وسیله ی آن می توانیم عناصر DOM را کپی کنیم. استفاده از این متد آسان است. برای استفاده از آن، عناصر DOM را با استفاده از تابع jQuery()  انتخاب کنید و سپس متد clone() را بر روی آن عناصر اجرا کنید. یک کپی از این کدها ایجاد می شود. در کدهای زیر، ما عنصر <ul>  را کپی کرده ایم و سپس این کد کپی شده را  با استفاده از متد appendTo() در کدهای DOM ادغام می کنیم. در حقیقت ما یک عنصر <ul> دیگر را دقیقا مانند قبلی، به صفحه اضافه می کنیم.

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 <ul>
 <li>list</li>
 <li>list</li>
 <li>list</li>
 <li>list</li>
</ul>
 <script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
 <script type="text/JavaScript">
  jQuery('ul').clone().appendTo('body');
 </script>
</body>
</html>

 


توضیحات

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

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 <ul>
   <li>list</li>
   <li>list</li>
   <li>list</li>
   <li>list</li>
 </ul>
<script type="text/JavaScript"src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
  jQuery('ul').clone().appendTo('body');
</script>
</body>
</html>

 اگر ما این کدها را در یک مرورگر باز کنیم، تمام عناصر <li> درون صفحه که یک رویداد کلیک(click) به آنها متصل شده است، نیز کپی می شوند. سپس این عناصر جدید کپی شده(همراه با رویدادها) در عنصر <ul> خالی، الحاق می شوند و سپس عنصر <ul> که کپی کرده ایم را حذف می کنیم.

 ممکن است این توضیحات خسته کننده باشند، بنابراین اجازه دهید که از طریق کدها، و در عمل کارها را مشاهده کنیم:

<!DOCTYPE html>
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</head>
<body>
 <ul id="a">
  <li>list</li>
  <li>list</li>
  <li>list</li>
  <li>list</li>
 </ul>
 <ul id="b"></ul>
<script type="text/JavaScript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/JavaScript">
 jQuery('ul#a li')
 .click(function(){alert('List Item Clicked')})
 .parent()
 .clone(true)
 .find('li')
 .appendTo('#b')
 .end()
 .end()
 .remove();
 </script>
</body>
</html>

 1.ابتدا با دستور jQuery('ul#a li')  عنصر <ul> را که id آن a است  می گیریم و تمام <li> های درون این <ul> را انتخاب می کنیم.

 2. دستور .click(function(){alert('List Item Clicked')}) یک رویداد کلیک را به هر عنصر <li> اضافه می کند.

 3. دستور .parent() به عنصر والد <li> ها که یک <ul> است پیمایش می کند.

4. دستور .clone(true) عنصر <ul> و تمام فرزندان آن را کپی می کند و همچنین تمام رویدادهایی که به این عناصر متصل است را نیز کپی می کند. برای انجام این کار، به متد clone() مقدار بولین true  را می دهیم.

 5. با دستور .find('li') در داخل مجموعه عناصر قبلی که یک <ul> و چند <li> داشت، به دنبال خود <li> ها می گردیم.

 6. حالا با دستور appendTo('#b')  این عناصر انتخاب شده ی <li> را می گیریم و آنها را در عنصر <ul> که id آن b است قرار می دهیم(ادغام می کنیم).     

 7. با استفاده از متد end() به مجموعه عناصر انتخاب شده ی قبلی(previous selected set of elements)  (در خط 19) برمی گردیم که همان عنصر <ul> کپی شده(clone) است.

8. با استفاده از یک متد end() دیگر، که همان عنصر اصلی <ul> است که آن را کپی کرده ایم، بازمی گردیم.

9. با استفاده از متد remove() این عنصر <ul> مورد نظر را حذف می کنیم.

نکته: در اینجا درست مشخص نشد که چگونه با استفاده از دو متد end به مجموعه عناصر بالایی رسیدیم. باید بیشتر بررسی شود.

!Donate

نوشتن دیدگاه

لطفا نظرات خود را بیان کنید. به سوالات در سریع ترین زمان پاسخ داده خواهد شد.اما به نکات زیر توجه کنید:
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.


تصویر امنیتی
تصویر امنیتی جدید

ستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعالستاره غیر فعال