2
我已經創建了一個可以按任意順序排序的列表。您可以分離它的元素,並通過單擊重置按鈕,您將以默認順序再次獲取所有元素。我試圖以特定的id序列生成列表。下面是HTML在給定的id序列中設置列表順序
<ul id="sortable1" class="connectedSortable">
<li data-position="1" class="ui-state-default" id='item1'>Item 1
<a class="dummy" href="#">Detach</a>
</li>
<li data-position="2" class="ui-state-default" id='item2'>Item 2
<a class="dummy" href="#">Detach</a>
</li>
<li data-position="3" class="ui-state-default" id='item3'>Item 3
<a class="dummy" href="#">Detach</a>
</li>
<li data-position="4" class="ui-state-default" id='item4'>Item 4
<a class="dummy" href="#">Detach</a>
</li>
<li data-position="5" class="ui-state-default" id='item5'>Item 5
<a class="dummy" href="#">Detach</a>
</li>
</ul>
<button id ="reset">reset List</button>
<button id ="new">new order</button>
JS代碼:
$(function() {
//to get the number of children for loop counter
count = 0;
//$("#sortable1").children().length;
//array to hold the detached element
var array = [];
//function to sort the list
$("#sortable1").sortable().disableSelection();
// closure to detach the element and enter it in the array
var detachElement = (function (val) {
var counter = 0;
return function (val) {
count = counter;
alert(counter+" : "+val+" : "+count);
array[counter] = $(val).detach();
counter += 1;
}
})();
//call to detach the element
$('.dummy').on('click', function() {
var getID = $(this).parent().attr('id');
var getIdStr = "#"+getID;
detachElement(getIdStr);
});
//reset all the elements again
$('#reset').on('click', function(){
for(i=0;i<=count;i++)
{
$("#sortable1").append(array[i]);
}
count = 0;
/* $("#sortable1 li").sort(sort_li).appendTo('#sortable1');
function sort_li(a, b){
return ($(b).data('position')) < ($(a).data('position')) ? 1 : -1;
}*/
var elems = $('#sortable1').children('li').detach();
elems.sort(function(a,b){
var str1 = a.id;
var str2 = b.id;
return str1.localeCompare(str2);;
});
$('#sortable1').append(elems);
});
//custom order of the list
$("#new").on('click',function(){
var elems = $('#sortable1').children('li').detach(); //1,2,3,4,5 j
var newOrder = ["item3","item2","item1","item4","item5"];//3,2,1,4,5 i
var temp = [];
for(i=0; i<newOrder.length; i++){
for(j=0; j<elems.length; j++)
{
if (newOrder[i]===elems[j].id)
{
temp[i]=elems[j];
i++;//incrementing the outer loop
break;
}
else{
j++;
}
}
}
$('#sortable1').append(temp);
});
});
這裏我只得到第一個元素追加到UL( 「#sortable1」)的新秩序。請檢查列表的自定義順序。我希望新訂單中的所有項目都附加到UL。
這裏是小提琴http://jsfiddle.net/5aaPU/329/
不知道是什麼問題就在這裏或你的詢問請提供進一步的解釋 – sjm
上點擊新秩序按鈕我希望根據newOrder數組中給定的id進行列表排序。但我只得到第一個匹配的項目,說「item3」,但沒有其餘的。@ sjm – satyanshu
@satyanshu不再增加計數器再次看到答案 – madalinivascu