返回列表 發帖

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 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的尾端

TOP

返回列表 回復 發帖