javascript - 使用 li 项目中的 javascript 通过数据属性检索 id

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 类中检索 session 号: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')
    });
})