当两个元素交换位置时切换类？

Question

即时通讯使用jquery向上或向下移动div，这是排名系统的一部分，所以我需要排名类保持不变，取决于div是第一，第二，第三等... 顶部的div应该总是有第一类，第二类等于第二等等等等等等。 任何帮助很多appr。

HTML：

<div class="top5 first"> 
    <div class="voter"> 
     <a class="up" href="#">up</a> 
     <a class="down" href="#">down</a> 
    </div>      
</div> 


<div class="top5 second"> 
    <div class="voter"> 
     <a class="up" href="#">up</a> 
     <a class="down" href="#">down</a> 
    </div>      
</div> 

<div class="top5 third"> 
    <div class="voter"> 
     <a class="up" href="#">up</a> 
     <a class="down" href="#">down</a> 
    </div>      
</div> 

的jQuery：

$('.up').click(function() { 
     var parent = $(this).parent().parent(); 
     parent.insertBefore(parent.prev()); 

    }); 
    $('.down').click(function() { 
     var parent = $(this).parent().parent(); 
     parent.insertAfter(parent.next()); 

    }); 

Answer 1

有asimpler纯CSS的方法！
yoops，你可以这样做：

some-parent div:nth-child(0){ 
    do css 
} 
some-parent div:nth-child(1){ 
    do another css 
} 
some-parent div:nth-child(2){ 
    do another css 
} 

我认为这是比使用switchClass添加一些额外的计算到你的页​​面

Answer 2

如果您正在使用jQuery UI，你可以做到这一点很简单（但实现你自己的 “开关” 也不是那么困难）：

http://jsfiddle.net/vvBuF/2/

var classes = ['first', 'second', 'third']; 
function switchClasses(elem1, elem2) { 
    if(!elem1 || elem1.length === 0 || 
     !elem2 || elem2.length === 0) { return; } 
    var from = ''; 
    var to = ''; 
    $.each(classes, function(i, e){if(elem1.hasClass(e)) {from=e;}}); 
    $.each(classes, function(i, e){if(elem2.hasClass(e)) {to=e;}}); 
    switchClass(elem1, from, to); 
    switchClass(elem2, to, from); 
} 

function switchClass(elem, from, to) { 
    elem.removeClass(from); 
    elem.addClass(to); 
} 

$('.up').click(function() { 
    var parent = $(this).parent().parent(); 
    var prev = parent.prev(); 
    parent.insertBefore(prev); 
    switchClasses(parent, prev); 
}); 
$('.down').click(function() { 
    var parent = $(this).parent().parent(); 
    var next = parent.next(); 
    parent.insertAfter(next); 
    switchClasses(parent, next); 
}); 

或你可以recalculate从下往上：

http://jsfiddle.net/7fkbf/

var classes = ['first', 'second', 'third']; 
function recalculate() { 
    $('.top5').each(function(index) { 
     var t = $(this); 
     $.each(classes, function(i,e) {t.removeClass(e);}); 
     t.addClass(classes[index]); 
    }); 
} 


$('.up').click(function() { 
    var parent = $(this).parent().parent(); 
    var prev = parent.prev(); 
    parent.insertBefore(prev); 
    recalculate(); 
}); 
$('.down').click(function() { 
    var parent = $(this).parent().parent(); 
    var next = parent.next(); 
    parent.insertAfter(next); 
    recalculate(); 
});