jquery对dom元素进行移动操作时的小小陷阱

    或许是我“入世太浅”,在使用append,prepend以及之类的对dom元素位置进行操作的方法进行列表排序时,发现了一个有意思的小陷阱。
    当时的功能需求是,点击排序按钮,列表依据某数据从大到小排序,再次点击时,取消排序复原列表。我的思路是,专门写一个ul用来放置有序列表,来回toggle无序和有序列表即可。
    很快,排序函数写完了,但是我发现,再次点击,无序列表并没有显示。再次点击排序,有序列表正常显示。我以为是toggle方法不兼容,可是有序列表有效啊。我使用css()来改变‘display’属性,结果还是无效。因为开发平台联机调试时无法在IDE上实时预览,我没法审查元素来看看到底发生了什么,而且没有断点调试功能。各种方法试遍,还是不行。
    打印。我打印了ul的个数,没错,两个。在该显示无序列表的时候,我打印了它里边li的个数,我晕,0!也就是append之类的方法直接移动了被选中的元素,而不是复制!就像大学时候一哥们到我们宿舍:“有电影没有,我拷几个。你懂的。”然后几天后下铺兄弟默默的一遍又一遍打开每一个可能的文件夹并自言自语哎我去我的苍老师呢。没错,那哥们的拷,是剪切。
    无序列表的li被直接剪切到新建好的有序列表了那自然就成了空列表所以两个列表正常切换了只不过原无序列表变成了空表。
    于是我在append之前加了一步,定义一个数组,数组元素与无序列表里的li一一对应,不再对他们直接操作。在有序列表插入的是数组里的元素。这总可以吧,又没有动它们。然后,一样的结果。我甚至$T = $(this);$('.sortList').append($T);依然不行。
    也就是说,在一个页面中将dom元素赋值给其他变量,那么原有dom元素,就不复存在了?。个人理解,未查证,欢迎指正。

你可能感兴趣的:(jquery对dom元素进行移动操作时的小小陷阱)