javascript - 通过jquery，javascript在列表中上下改变位置

Question

我正在处理一个根据单击的按钮更改位置的列表。这是我创建的无序列表，内容如下

<ul>
    <li>
        <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;cat3_sub3</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div style="text-align:right;float:right;">
                [ <a href="#" class="up_sub" id="3_3">Up</a> ] 
                [ <a href="#" class="down_sub" id="3_3">Down</a> ]
            </div>
        </div>
    </li>
    <li>
        <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;cat3_sub2</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div style="text-align:right;float:right;">
                [ <a href="#" class="up_sub" id="2_3">Up</a> ] 
                [ <a href="#" class="down_sub" id="2_3">Down</a> ]
            </div>
        </div>
    </li>
    <li>
        <div>
            <span>&nbsp;&nbsp;&nbsp;&nbsp;cat3_sub2</span>
            &nbsp;&nbsp;&nbsp;&nbsp;
            <div style="text-align:right;float:right;">
                [ <a href="#" class="up_sub" id="1_3">Up</a> ] 
                [ <a href="#" class="down_sub" id="1_3">Down</a> ]
            </div>
        </div>
    </li>
</ul>

现在我想在单击向上或向下链接时向上或向下更改列表。所以为此我写了一个这样的javascript

$(document).ready(function(){
$(".up_sub,.down_sub").click(function(){
    var rank_id = this.id;
    rank_id = rank_id.split("_");
    var rank = (rank_id[0]);
    var cat_id = rank_id[1];
    var max_rank = get_max_rank(cat_id);
    if ($(this).is(".up_sub")) {
        if(rank!=max_rank){                                 //to not to move up than top most
            var thisLine = $(this).parent();
            var prevLine = thisLine.prev();
            prevLine.before(thisLine);
        }
    }
    });
});

但这没有用。我检查了它是否使用alert(). 它给出了回应。但这份名单并没有改变他们的立场。这背后的原因是什么。应该怎么做才能改变列表位置？

Answer 1

尝试

$('.up_sub').click(function(){
    var li = $(this).closest('li');
    var prev = li.prev();
    if(prev.length){
        li.detach().insertBefore(prev);
    }
});
$('.down_sub').click(function(){
    var li = $(this).closest('li');
    var next = li.next();
    if(next.length){
        li.detach().insertAfter(next);
    }
});

演示：小提琴