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

如果您使用的是jQuery UI，可以使用switchClass来实现（但实现自己的“切换”并不困难）：

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();
});

Answer 2

有更简单的纯css方法！
哟，你可以这样做：

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
}

我认为这比向页面添加一些额外的计算要简单得多

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

2 个答案: