Jquery sortable - ソートリストのマニュアル

Question

listitemsをsortList[0]またはsortList[1]でソートするにはどうすればよいですか？

例：http://jsfiddle.net/wmaqb/20/

HTML

<div id="sortable">   
    <div id="sort_18b0c79408a72">Berlin</div> 
    <div id="sort_dkj8das9sd98a">Munich</div> 
    <div id="sort_skd887f987sad">Browntown</div> 
    <div id="sort_54asdliöldawf">Halle</div> 
    <div id="sort_f5456sdfefsdf">Hamburg</div>  
</div> 

<input id="sortList0Bt" type="button" value="sortList0" /> 
<input id="sortList1Bt" type="button" value="sortList1" /> 

JS

sortList= new Array(); 

sortList[0] = {}; 
sortList[0]['18b0c79408a72'] = 6; 
sortList[0]['dkj8das9sd98a'] = 9; 
sortList[0]['skd887f987sad'] = 3; 
sortList[0]['54asdliöldawf'] = 1; 
sortList[0]['f5456sdfefsdf'] = 5; 

sortList[1] = {};  
sortList[1]['18b0c79408a72'] = 1; 
sortList[1]['dkj8das9sd98a'] = 2; 
sortList[1]['skd887f987sad'] = 3; 
sortList[1]['54asdliöldawf'] = 4; 
sortList[1]['f5456sdfefsdf'] = 5; 

$("#sortable").sortable(); 

$('#sortList0Bt').click(function() { sortIt(sortList[0]); }); 
$('#sortList1Bt').click(function() { sortIt(sortList[1]); }); 

JS - ソート機能

function sortIt(sortList) 
{ 
    var mylist = $('#sortable'); 
    var listitems = mylist.children('div').get(); 

    listitems.sort(function(a, b) 
    { 
     // --------------- >>> HERE <<< -------------- 
    }); 

    $.each(listitems, function(idx, itm) { mylist.append(itm); }); 
} 

ありがとうございます！

Answer 1

私はあなたを正しく理解していれば、基本的に同じリストを別の方法で並べ替える複数のボタンが必要ですか？

私は次のように変更することをお勧め：

<input id="sortList0Bt" class="sortbutton" type="button" value="sortList0" /> 
<input id="sortList1Bt" class="sortbutton" type="button" value="sortList1" /> 

$('.sortbutton').click(function() { 
    var id = parseInt($(this).val().replace("sortList","")); 
    //The above gives you "0" or "1" which is then parsed to an int 
    sortIt(sortList[id]); 
}); 

今、あなたはどのクリックハンドリングハードコードされ、ボタンのみ自分自身を持っていません。

あなたのような並べ替え配列を手動で作成するのはむしろ非効率的なようです。 .sortable()を使用するとき、またはdiv ID（これらのID自体はどちらもそれを明確にしていません）を使用したときの自由度はわかりませんが、クラスを使用してこれを行うか、div内に要素を追加してソート関数それらを注文するために使用することができます。

例えば：

<div id="sort_18b0c79408a72"> 
    Berlin 
    <input type="hidden" class="sort_me_for_button_0" id="0_1"> 
    <input type="hidden" class="sort_me_for_button_1" id="1_4"> 
</div> 

ボタン0をクリックすると、要素が1位に表示されます。ボタン1をクリックすると、要素が4位に表示されます。 これを完全に書いても、いくらかの脳力が必要ですが、これを処理するのが最も効率的で明確な方法だと思います。

<div id="mysortedlist"></div> 

function sortIt(id) { //not the sortList, just the 0 or 1 int we parsed earlier. 
    var number_of_items = $(".sort_me_for_button_"+id).length; //Now we know how many items there are to sort. 

    for (int i = 1; i < number_of_items + 1; i++) { 
     $("#mysortedlist").append($("#" + id + "_" + i).parent()); //the parent() is the div in which the hidden field resides. 
    }; 

    $("#sortable").html($("#mysortedlist").html()); 
} 

：

することは、あなたがそれらを並べ替えるだろうかのアイデアを与えるために、