jquery中的.append()出现复制

[firefly_is_me]

情况是这样的，我现在在看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()方法是不会复制节点的，这是为什么呢？
效果：点击前
点击后

[firefly_is_me]

引用 2 楼 bobbyworm 的回复:

问题出在$table.children('tbody').append(row);这一行 这时候$table.children('tbody')获取到的是两个tbody节点对象，如果把一个对象同时append到多个节点，会在每个节点下复制一份，只对一个节点append时则不会复制，看下面这个例子就明白了： <span>test</span> <p></p> <p></p> <p></p> 如果执行： $('p').append($('span')); 结果是： <p><span>test</span></p> <p><span>test</span></p> <p><span>test</span></p> 如果执行： $('p:eq(1)').append($('span')); $('p:eq(2)').append($('span')); $('p:eq(3)').append($('span')); 结果是： <p></p> <p></p> <p><span>test</span></p>

哦。。原来是这样，谢谢啦，记下了，就是一次多个节点的话，会复制，一次一个节点就是移动。。

[firefly_is_me]

引用 4 楼 u010016988 的回复:

果然手贱··

哈哈！！！当时看书看得有点糊涂了，就敲多了一次，结果发现了新的问题，这样挺好的，只希望工作的时候别敲错就好了。。

[firefly_is_me]

引用 3 楼 u011461314 的回复:

那有复制这概念。 row 已固定，你爱加几次就几次。

额，额，那个rows是tbody > tr下的所有节点缓存，我之所以说复制，是因为执行了那个$table.children('tbody').append(row);后多出了数个节点。。

[zhjdg]

$table.children('tbody').append(row);

[bobbyworm]

问题出在$table.children('tbody').append(row);这一行 这时候$table.children('tbody')获取到的是两个tbody节点对象，如果把一个对象同时append到多个节点，会在每个节点下复制一份，只对一个节点append时则不会复制，看下面这个例子就明白了： <span>test</span> <p></p> <p></p> <p></p> 如果执行： $('p').append($('span')); 结果是： <p><span>test</span></p> <p><span>test</span></p> <p><span>test</span></p> 如果执行： $('p:eq(1)').append($('span')); $('p:eq(2)').append($('span')); $('p:eq(3)').append($('span')); 结果是： <p></p> <p></p> <p><span>test</span></p>

[zhjdg]

那有复制这概念。 row 已固定，你爱加几次就几次。

[u010016988]

果然手贱··

[斯洛文尼亚旅游]

不是复制，是将内容插入选中的节点中，选中多少个都会往里面插入内容