標題: jQuery append 問題 [打印本頁]
作者: player889 時間: 2014-1-9 20:41 標題: jQuery append 問題
本帖最後由 player889 於 2014-1-9 20:45 編輯
小弟做了一個小東西，網站 範例]
功能：使用者可以使用上下按鈕來移動物件，而RESET按鈕可讓物件回到最初的位置
然而我在reset function 中使用append 這一個功能，但是它沒有增加contents
，反而覆蓋我原有的contents，我是用append，請問為啥會出現覆蓋的情形？
謝謝解答！！$(document).ready(function() {
var list = init();
var last = $('#table').find("tr").length;
$('#table').find("tr").each( function(index,element){
$(this).prepend($("<button/>").text("↑").bind('click',function() {up($(this).parent(),last);}));
$(this).prepend($("<button/>").text("↓").bind('click',function(){down($(this).parent(),last);}));});
$('#table').before($('<button />').text("reset").on('click',function(){reset(list);}));
});
function up(tr,last){
if( 0 != tr.index() ){
var prevTr = tr.prev();
tr.after(prevTr);
}
}
function down(tr,last){
if( last-1 != tr.index() ){
var nextTr = tr.next();
tr.before(nextTr);
}
}
var reset = function(list){
for(var i = 0 ; i <list.length; i++){
$("#table").append(list[i]);
}
};
var init = function(){
var list = [];
$('#table tr').each(function(){
list.push($(this));
});
return list;
}; <table id="table">
<tr id = "1">
<td>First</td>
<td>B</td>
<td>C</td>
</tr>
<tr id = "2">
<td>second</td>
<td>2</td>
<td>3</td>
</tr>
<tr id = "3">
<td>third</td>
<td>@</td>
<td>#</td>
</tr>
<tr id = "4">
<td>THANKS</td>
<td>FOR</td>
<td>HELPING</td>
</tr>
</table>
作者: hasschi 時間: 2014-4-9 10:56
本帖最後由 hasschi 於 2014-4-9 11:02 編輯
我相信你應該是混亂了，
jquery 的 before、after、prepend、append都是dom的操作
你所宣告的list 雖然是jquery對像但他確實是實際存在的dom
在reset的程式裡
$("#table").append(list[i ]);
你應該要理解成：
jquery「移動」了DOM，並不是新增、刪除的動作
實際來看一下 RESET 內會發生什麼事：
list 為 [tr#1, tr#2, tr#3, tr#4] //我只是簡單表達一下，裡面的還是jquery對像
> i = 0,
> 0 < 4
> $("#table").append(list[0])
#table
tr#2
tr#3
tr#4
tr#1 //你將上面的tr#1 移動到這邊
> i = 1
> 1 < 4
> $("#table").append(list[1])
#table
tr#3
tr#4
tr#1
tr#2
> i = 2
> 2 < 4
> $("#table").append(list[2])
#table
tr#4
tr#1
tr#2
tr#3
> i = 3
> 3 < 4
> $("#table").append(list[3])
#table
tr#1
tr#2
tr#3
tr#4
> i = 4
> 4 < 4 //false,結束
簡單來說你將4個tr 依序移動到了table的尾端
| 歡迎光臨 jsGears.com 技術論壇 - AJAX, JavaScript, jQuery, 網站開發, 前端效能優化 (http://jsgears.com/) |
|