jQuery的排序連接列表 - 獲取

Question

我正在努力讓

<ul id="sortable1" class="connectedSortable"> 
    <li class="ui-state-default" data-value="U1" id="L1">Item 1</li> 
    <li class="ui-state-default" data-value="U2" id="L2">Item 2</li> 
    <li class="ui-state-default" data-value="U3" id="L3">Item 3</li> 
</ul> 

<ul id="sortable2" class="connectedSortable"> 
    <li class="ui-state-highlight" data-value="U6" id="R1">Item 1</li> 
    <li class="ui-state-highlight" data-value="U7" id="R2">Item 2</li> 
    <li class="ui-state-highlight" data-value="U8" id="R3">Item 3</li> 
</ul> 
<input type="submit" value="Submit" onclick="submit()"> 

JavaScript部分

$(function() { 
    $("#sortable1, #sortable2").sortable({ 
     connectWith: ".connectedSortable" 
    }).disableSelection(); 

    var dataList = $("#sortable1 li").map(function() { 
     return $(this).data("id"); 
    }).get(); 
}); 

function submit(){ 
    alert(dataList); 
} 

我可以jQuery UI的可排序的連接列表值」列表ID和數據值的排序值t的輸出爲var dataList。

下面的代碼爲我工作，但我需要一種方法來獲取屬性data-value與ID的值？

var idsInOrder1 = $("#sortable1").sortable("toArray"); 
var idsInOrder2 = $("#sortable2").sortable("toArray"); 

Answer 1

可以使用the .attr() function在HTML屬性得到：

$(this).attr("data-value"); 

您也可以使用相同的函數來獲取id -s：

var dataList = $("#sortable1 li").map(function() { 
    return $(this).attr("id"); 
}).get(); 
// or, to get both... 
dataList = $("#sortable1 li").map(function() { 
    return { id: $(this).attr("id"), dataValue: $(this).attr("data-value") }; 
}).get(); 
// Now you can get id-s and data values as... 
var myId = dataList[0].id; 
var myValue = dataList[0].dataValue; 

然而，這種用法的.map()和.get()有點混淆。是的，它的工作原理，如果你發現它更容易繼續使用它，但可以和.each()更可讀取達到同樣的效果：

var dataList = []; 
$("#sortable1 li").each(function(idx, elt) { 
    dataList.push({ id: $(elt).attr("id"), dataValue: $(elt).attr("data-value") }); 
}); 

這裏有一個演示小提琴顯示在行動所有這些：http://jsfiddle.net/JpcXL/