使用JavaScript从li元素data-id获取ID时重复取首个ID的问题排查

问题背景 #

你想要从带有rightDiv类的<ul>元素中提取会话编号，同时遍历每个<li>获取对应的data-id，但实际运行后发现所有subjectID都变成了第一个<li>的ID，没能正确获取每个li的对应值。

现有代码 #

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<button class="delbtn">×</button></li>
</ul>

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

结果对比 #

• 实际得到的JSON：

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

• 期望的正确JSON：

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

问题原因 #

核心问题出在这一行代码：

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

当你调用$(this).find('li')时，返回的是当前<ul>下所有<li>元素的集合，而.data('id')方法只会返回集合中第一个元素的data-id值。所以不管循环多少次，你拿到的始终是第一个<li>的data-id=1，自然就出现了重复的结果。

另外还有个潜在隐患：你通过split('×')来获取<li>的数量，这种方式依赖文本内容里的×符号，一旦HTML结构或者文本有变化，这个数量就可能不准确，不如直接用<li>元素的数量来循环更可靠。

修复方案 #

有两种简单的修复方式，推荐第二种更直观健壮的写法：

方式1：修改循环中li的定位逻辑

在for循环里，通过.eq(i)定位到当前索引对应的<li>元素，再获取它的data-id：

var sessions = [];
$('.rightDiv').each(function(index) {
  var $lis = $(this).find('li'); // 先缓存所有li元素，避免重复查找
  var sessionData = [];
  for (var i = 0; i < $lis.length; i++) {
    var ids = $lis.eq(i).data('id'); // 精准定位到第i个li
    var s = { subjectOrder: i, subjectID: ids };
    sessionData.push(s);
  }
  var ses = { sessionNo: index, sessionData: sessionData };
  sessions.push(ses);
});

方式2：直接遍历li元素（更简洁可靠）

用.each()直接遍历每个<li>，同时获取索引和对应的data-id，逻辑更清晰，也不依赖文本符号：

var sessions = [];
$('.rightDiv').each(function(index) {
  var sessionData = [];
  $(this).find('li').each(function(i) {
    var s = { 
      subjectOrder: i, 
      subjectID: $(this).data('id') // 这里的this是当前遍历的li元素
    };
    sessionData.push(s);
  });
  var ses = { sessionNo: index, sessionData: sessionData };
  sessions.push(ses);
});

内容的提问来源于stack exchange，提问作者Dani M