使用append（）來排序列表

我想一個<table>看起來像這樣內<tr>元素進行排序：使用append（）來排序列表

之前

<table> 
    <tbody> 
    <tr id="foo">...</tr> 
    <tr id="bar">...</tr> 
    <tr id="baz">...</tr> 
    <tr id="qux">...</tr> 
    </tbody> 
</table>

假設我要到行，以便進行排序表變成這樣：

後

<table> 
    <tbody id="table"> 
    <tr id="foo">...</tr> 
    <tr id="qux">...</tr> 
    <tr id="baz">...</tr> 
    <tr id="bar">...</tr> 
    </tbody> 
</table>

我可以使用jQuery腳本序列做到這一點：

$('#table').append($('#qux')); 
$('#table').append($('#baz')); 
$('#table').append($('#bar'));

，但我想使腳本到一個，當我嘗試：

$('#table').append($('#qux,#baz,#bar'));

原始表，它似乎沒有任何效果。爲什麼這不起作用？有一種方法可以在一個命令中執行此操作嗎？

來源

2013-05-01 sawa

u能試試嗎？ $（'＃table'）。append（$（'＃qux'）+ $（'＃baz'））;沒有嘗試，但猜測.. – sree 2013-05-01 08:16:46

http://stackoverflow.com/a/3160718/1104483 – 2013-05-01 08:26:46

這工作：

$('#table').append($('#qux'),$('#baz'),$('#bar'));

如果你試試這個，用調試器檢查元素

var elements = $('#qux, #baz, #bar'); 
$('#table').append(elements);

你可以看到什麼jQuery是這樣做的：它加載從您選擇的元素，但它們是按照它們在DOM中出現的順序排列！（酒吧，巴茲和奎茲）。所以追加方法正在工作，但它是以相同的順序追加它們！

來源

2013-05-01 08:22:10

你可以連續使用jQuery方法：

$('#table').append($('#qux')).append($('#baz')).append($('#bar'));

來源

2013-05-01 08:17:06

從文檔

The order of the DOM elements in the returned jQuery object may not be identical, as they will be in document order.

那麼，你是在他們已經是相同的順序進行添加。

來源

2013-05-01 08:21:59 zeroflagL

好吧，我做了一些測試，並在這裏就是爲什麼它不工作，你所希望的方式：

http://jsfiddle.net/9V2Xr/ 在這裏，你可以看到，如果它要想在DOM（這是第一次嘗試從另一張桌子），它的作品。

但隨後http://jsfiddle.net/9V2Xr/1/這裏，如果這是你原來的表，你可以看到，當你做

var sort = $('#qux,#baz,#bar').detach(); 
console.log(sort);

在日誌中，你會發現bar然後baz最後qux。結論，它需要的順序從DOM

編輯基本上，我的測試是沒有用的，it'es解釋in the doc。

所以，主要的解決辦法是鏈接append()或使用多個選擇$('#qux'), $('#baz'),$('#bar')而不是$('#qux,#baz,#bar')

來源

2013-05-01 08:23:51 Shikiryu

感謝您的解釋。現在很清楚。 – sawa 2013-05-01 08:27:08

使用append（）來排序列表

回答

相關問題