Question

的JavaScript

<小时/>

var sessions = [];
$('.rightDiv').each(function(index) {
    var session = $.trim($(this).text().slice(0, -1)).split("×");
    var sessionData = [];
    for (var i = 0; i < session.length; i++) {
        var ids = $(this).find('li').data('id');
        var s = {
            subjectOrder: i,
            subjectID: ids
        };
        sessionData.push(s);
    }
    var ses = {
        sessionNo: index,
        sessionData: sessionData
    };
    sessions.push(ses);
});

HTML

 <ul id="form_builder_sortable_sample" class="sortable rightDiv session4 ui-sortable"> 
  <li class="draggable" data-id="1" name="Counting" >Counting<button onclick="deleteElement(event)" class="delbtn">×</button></li>
  <li class="draggable" data-id="2" name="Priorities" >Priorities" class="delbtn">×</button></li>
 </ul>

JSON

<小时/>

{"sessionNo":"0","sessionData":[{"subjectOrder":"0","subjectID":"1"},{"subjectOrder":"1","subjectID":"1"}]}

我的问题

上面代码的作用是从ul类中检索会话no：class="sortable rightDiv session4"以及来自data-id的li的每个id。

在这种情况下，它通过li项循环很好，但它只显示第一个li元素的id。它应该是：

{"sessionNo":"0","sessionData":[{"subjectOrder":"0","subjectID":"1"},{"subjectOrder":"1","subjectID":"2"}]}

知道什么是错的吗？

Answer 1

由于您使用的是$(this).find('li').data('id');，因此它始终会返回第一个li数据属性的值。

使用.each()迭代并创建一个数组

var sessionData = [];

$(this).find('li').each(function (index, elem) {
    sessionData.push({
        subjectOrder: index,
        subjectID: $(elem).data('id')
    });
})

Answer 2

变化：

var ids  = $(this).find('li').data('id');

为：

var ids  = $(this).find('li').eq(i).data('id');

使用来自li项目的javascript通过数据属性获取id

2 个答案: