کپی کردن عناصر 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 به مجموعه عناصر بالایی رسیدیم. باید بیشتر بررسی شود.
{module کمک نقدی به نویسنده}
- بازدید: 822
1. سعی کنید نظرات شما مرتبط با مقاله ی مورد نظر باشد، در غیر این صورت پاسخ داده نخواهد شد.
2. سوالات خود را به صورت کوتاه بیان کنید و از پرسیدن چند سوال به طور همزمان خودداری کنید.
3. سوال خود را به طور واضح بیان کنید و از کلمات مبهم استفاده نکنید.