javascript - jquery、javascriptを介してリスト内の位置を上下に変更する

Question

クリックされたボタンに応じて位置が変わるリストに取り組んでいます.Hereは私が作成した順序付けられていないリストで、このような内容を持っています

<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()ました。それは応答を返しました。しかし、リストはその位置を変えていません。この背後にある理由は何ですか。リストの位置を変更するにはどうすればよいですか？