jQuery中append特性分析(二)

昨天分析了B→A,B为多个,A为单个的情况,那么B所包含的元素将会脱离原来的位置,移动到这个唯一的A里面;但是如果A为多个呢?按照之前的说法,B将会自动clone到A中每一个元素中,事实如此吗?

先看下面的代码:

<style>
    table{margin: 10px;}
    .t1{border: 1px solid red;}
    .t2{border: 1px solid blue;}
    .t3{border: 1px solid green;}
    .t4{border: 1px solid yellow;}
</style>

<table class="t1">  <tr>    <td>table 1</td>    </tr> </table>
<table class="t2">  <tr>    <td>table 2</td>    </tr> </table>
<table class="t3"></table>
<table class="t4"></table>

<script>
    var tds=$('table.t1 tr');
    $('table').on('click','td',function(){
        $('table').append(tds);
    });
</script>

点击查看DEMO演示。

一共有4个表格,表格1和表格2有内容,表格3、4为空。对应前面,B是表格1的那一行内容,A将是所有的4个表格,按照开头的说法,点击一次单元格,B将被复制到所有的表格,但是点击之后的现象是:

第一次点击,表格2、3、4都增加了一行;
第二次点击,表格1、2、3都增加了一行;
第三次点击,表格1、2、3都增加了一行;
……

后面的每次点击,都只是表格1、2、3增加一行。

个人的猜测:

tds指向的表格1的那一行tr已经被移动到了表格4,这个通过firebug的输出功能也能看到,tds已经指向了表格4,正因为tds后面都是直接指向了表格4的仅有的那一行,所以以后的每次增加,表格4都不会变化,也部分验证了上一篇文章说到的,如果B来自于A,那么B→A将执行移动。表格4只有一行了,所以就抽出又插进去,没有变化;而其余的3个表格执行的是添加tds的clone。

所以上面的都好解释了,那么第一次执行了什么呢?

第一次,tds指向的是表格1的那一行tr,所以表格1没变化,其余各表格增加tds的clone,但是,关键是执行完第一次的点击活动之后,tds指向了表格4,这一点非常奇怪。

我又改了一点点代码,变成了

var tds=$('table tr')

点击查看DEMO演示。

这时候,前面3个表格都没有异常,按预想的增加了两个tr。。。不对,表格2的内容应该是table2,table1,但是现在和表格1和表格2一样,成了table1、table2的顺序。并且表格4的内容一直固定了,并且tds指向了表格4(还是通过firebug的console查看tds,鼠标移动到输出的tds,然后页面居然指示到了表格4!)。

总结:对于以上种种奇怪的现象,只有通过查看jQuery源代码才知道了。那个一对多就自动复制的说法不可靠啊,目前来看,只要A中的元素个数较多的时候,就有莫名其妙的问题,好像B最终都会指向A中的最后一个元素。暂时的解决办法是,开始指向的时候、后面添加的时候都使用clone方法好了。

可能本文说得有点不清楚,而且这样的情况也比较极端,然后本文没有完结,有一天明白了再来补充吧。

标签: jquery, append, clone

添加新评论