หน้าเว็บ

วันอังคารที่ 22 มีนาคม พ.ศ. 2554

คัดลอกเซ็ตของอิลิเมนต์ด้วย Method clone() ใน jQuery

หน้าที่ของเจ้า Method clone() ก็คือมันจะ copy เซ็ตของอิลิเมนต์ทั้งหมด
โดยถ้าเรากำหนด argument เป็น true คือจะ copy event handler มาด้วย
แต่ถ้ากำหนด argument เป็น false คือจะไม่ copy event handler มา

ลองดูตัวอย่างนี้ก่อนนะคะ ถ้าสมมุติเรียวเขียนแบบนี้

<body>
    <div>
        <a href="#" class="link1">ลิงค์ 1</a>
        <a href="#" class="link2">ลิงค์ 2</a>
    </div>
</body>

<script>
$(document).ready(function() {
    $(".link1").appendTo("body");
});
</script>

ทีนี้ลองรันดูนะคะ จะได้ผลลัพธ์ดังนี้

<body>
    <div>
        <a href="#" class="link2">ลิงค์ 2</a>
    </div>
    <a href="#" class="link1">ลิงค์ 1</a>
</body>

จะเห็นว่าอิลิเมนต์ที่มีคลาสชื่อว่า "link1" จะถูกย้ายเพิ่มเข้าไปท้ายสุดในแท็ก body ซึ่งจะเห็นว่าแท็ก a ที่มีชื่อคลาสว่า "link1" จะถูกเพิ่มเข้าไปในลักษณะ Move ไป หรือ Cut ไปวางนั่นเอง

ทีนี้เรียวจะลองใช้คำสั่ง clone() ดูนะคะ

$(document).ready(function() {
    $(".link1").clone().appendTo("body");
});

ทีนี้ลองรันดูอีกทีนะคะ

<body>
    <div>
        <a href="#" class="link1">ลิงค์ 1</a>
        <a href="#" class="link2">ลิงค์ 2</a>
    </div>
    <a href="#" class="link1">ลิงค์ 1</a>
</body>

จะเห็นว่าอิิลิเมนต์ที่ใช้คลาส "link1" จะถูกเพิ่มเข้าไปใน body และอิิลิเมนต์เดิมก็ยังคงอยู่เนื่องจากเราใช้ Method clone() นั่นเอง

ไม่มีความคิดเห็น:

แสดงความคิดเห็น