Javascript jQuery可排序连接列表-获取列表id和数据值的排序值

我正在努力获取jQueryUISortable的连接列表的值

<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()">

我无法获取

var dataList

的输出

下面的代码适用于我，但我需要一个方法来获取属性值

数据值

以及ID

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

---

您可以使用以下方法获取HTML属性：

您还可以使用相同的函数获取

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（）

的这种用法有点令人困惑。是的，它是有效的，如果您发现它更容易使用，请继续使用它，但同样的效果可以通过以下方式更容易地实现：

下面是一个演示小提琴，展示了所有这些动作：

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

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;

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