jQuery 实现置顶效果

本身置顶效果是比较简单的 但是还是让自己花了不少时间 。

主要是没有考虑的jQuery的版本问题 。公司用的jQuery版本比较古老。和现在的版本有个区别。自己经常用的jQuery选择器不会吧选出来的dom元素作为object对象 。公司的版本会把选出来的dom元素作为一个数组。

这两个版本的after 方法有点不同。数组状态是不允许$(a).after($(a));这样会使$(a)元素消失。object状态下的却可以正常的使用。

代码如下

$('.icon_notop,.icon_top').click(function() {//置顶
        var t = $(this);
        var tr = t.parent().parent();            
        var paixuid =  tr.attr('paixu');
        var nottop=$(".bg_top:last");//.parent().parent();        
        if (t.hasClass('icon_top')) {
        tr.removeClass('bg_top');            
        t.removeClass('icon_top').addClass('icon_notop');                    
            while(nottop.next("tr").attr("paixu") - 0< paixuid - 0){
               nottop=nottop.next('tr');
            }    
            if(nottop.attr("paixu")!=tr.attr("paixu")) //解决版本问题 
                nottop.after(tr);
            
        } else {
            t.removeClass('icon_notop').addClass('icon_top');
            tr.addClass('bg_top');
            $('#table_match tbody').prepend(tr);
        }
});

主要是要一直能够取得插入位置的前一个位置，这里若是取插入位置的后一个位置的选取并不是每次都那么容易的。在所有的dom都被置顶的时候就会出先比较麻烦的情况。