ก่อนอื่นสร้างอิลิเมนต์ภายใน body ขึ้นมาเหมือนเดิม
<body>
<a href="#" class="link1">ลิงค์ 1</a>
<a href="#" class="link2">ลิงค์ 2</a>
<div>
<div id="dv1"></div>
</div>
</body>
ทีนี้เขียน jQuery คือเรียวต้องการย้ายแท็ก a ทั้งหมดไปแทนที่ div ที่มี id = "dv1" ก็จะเขียนได้แบบนี้
$(document).ready(function() {
$("#dv1").replaceWith($("a"));
});
จากนั้นลองรันดูนะคะ
<body>
<div>
<a class="link1" href="#">ลิงค์ 1</a>
<a class="link2" href="#">ลิงค์ 2</a>
</div>
</bodY>
จะเห็นว่าแท็ก a จะถูกย้ายไปแทนทีอิลิเมนต์ที่มี id="dv1" นั่นเอง
ทีนี้มาดูอีกตัวอย่างค่ะ ให้สร้างอิลิเมนต์ขึ้นมาก่อนสองตัว
<body>
<div class="button">คลิกอิลิเมนต์ที่ 1</div>
<div class="button">คลิกอิลิเมนต์ที่ 2</div>
</body>
ทีนี้เรียวต้องการให้คลิกที่ div แต่ะละตัว แล้วให้ตัวที่คลิกนั้นเปลี่ยนเป็น textbox แล้วเอาค่าทีคลิกแสดงลงไปในช่อง textbox มาลองเขียน jQuery กันเลย
$(document).ready(function() {
$(".button").click(function () {
$(this).replaceWith("<input type='text' value='" + $(this).text() + "' /><br />");
});
});
ลองรันดู
<body>
<input type="text" value="คลิกอิลิเมนต์ที่ 1" /><br />
<div class="button">คลิกอิลิเมนต์ที่ 2</div>
</body>
จะเห็นว่าเมื่อคลิกที่อิลิเมนต์แต่ะละตัว อิลิเมนต์นั้นจะถูกแทนทีด้วย textbox นั่นเอง
จริงจากตัวอย่างด้านบนเราสามารถเขียนได้อีกอย่างเป็น
$(document).ready(function() {
$("button").click(function () {
$(this).replaceWith( function ( index, oldContent ) {
return "<input type='text' value='" + $(this).text() + "' /><br />";
});
});
});
ง่ายดีเนอะ อะคริคริ
ไม่มีความคิดเห็น:
แสดงความคิดเห็น