jquery中的.append()出现复制,该如何处理
日期：2014-05-16 浏览次数：20398 次
jquery中的.append()出现复制
情况是这样的，我现在在看jquery基础教程，第七章中有这样一个例子：代码如下
中间本来只有一个<tbody>的标签，然后我手贱的敲多了一对
然后在使用jquery时，代码如下：
出现了很奇怪的复制现象，在jquery的api中.append()方法是不会复制节点的，这是为什么呢？
效果：点击前
点击后
情况是这样的，我现在在看jquery基础教程，第七章中有这样一个例子：代码如下
<table class="sortable">
<thead>
<tr>
<th></th>
<th class="sort-alpha">Title</th>
<th>Author(s)</th>
<th>Publish Data</th>
<th>Price</th>
</tr>
</thead>
<tbody>
<tr>
<td><img src="images/covers/small/1847192386.png" width="49" height="61" alt="Building Websites with Joomla! 1.5 Beta 1"/></td>
<td>Building Websites with Joomla! 1.5 Beta 1</td>
<td>Hagen <span class="sort-key">Graf</span></td>
<td>Feb 2007</td>
<td>$40.49</td>
</tr>
</tbody>
<tbody>
<tr>
<td><img src="images/covers/small/1904811620.png" width="49" height="61" alt="Learning Mambo: A Step-by-Step Tutorial to Building Your Website"/></td>
<td>Learning Mambo: A Step-by-Step Tutorial to Building Your Website</td>
<td>Douglas <span class="sort-key">Paterson</span></td>
<td>Dec 2006</td>
<td>$40.49</td>
</tr>
</tbody>
</table>
中间本来只有一个<tbody>的标签，然后我手贱的敲多了一对
然后在使用jquery时，代码如下：
$(document).ready(function()
{
$('table.sortable').each(function(){
var $table = $(this);
$('th',$table).each(function(column){
var $header = $(this);
if($header.is('.sort-alpha'))
{
$header.addClass('clickable').hover(function(){
$header.addClass('hover');
},function(){
$header.removeClass('hover');
}).click(function(){
var rows = $table.find('tbody > tr').get();
$.each(rows,function(index,row)
{
var $cell = $(row).children('td').eq(column);
$(row).data("sortKey",$cell.text().toUpperCase());
});
rows.sort(function(a,b)
{
//alert($(a).text());
if($(a).data('sortKey') < $(b).data('sortKey'))
{
return -1;
}
if($(a).data('sortKey') > $(b).data('sortKey'))
{
return 1;
}
return 0;
});
//$table.find('tbody').empty();
$.each(rows,function(index,row){
$table.children('tbody').append(row);
//row.sortKey = null;
$(row).removeData('sortKey');
});
});
}
});
});
出现了很奇怪的复制现象，在jquery的api中.append()方法是不会复制节点的，这是为什么呢？
效果：点击前
点击后
