Question

我正在努力获取jQuery连接列表的值ui sortable

<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);
}

我无法获得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/

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

1 个答案: