如何从<li>的CSS类中提取ID值赋值给JavaScript变量subjectID？

解决方案 #

我来帮你搞定这个需求！你的核心目标是从每个<li>的class属性里提取出id后缀的数字（比如id10里的10）并赋值给subjectID，不过先得修正原代码里的一个小问题：你之前直接处理.rightDiv的文本内容，会把所有科目名称和按钮的×混在一起，分割出来的结果会不准确。正确的做法应该是直接遍历每个科目对应的<li>元素，再从中提取ID。

完整修改后的函数 #

function getSessionDatas() {
  var sessions = [];
  $('.rightDiv').each(function(index) {
    var sessionData = [];
    // 遍历当前session下的每个科目li元素
    $(this).find('li.draggable').each(function(i) {
      // 方法1：用正则表达式快速提取id后的数字（推荐）
      var idMatch = $(this).attr('class').match(/id(\d+)/);
      var subjectID = idMatch ? parseInt(idMatch[1], 10) : null;

      // 方法2：遍历class列表（兼容老浏览器场景）
      // var classList = $(this).attr('class').split(' ');
      // var subjectID = null;
      // for (let cls of classList) {
      //   if (cls.startsWith('id')) {
      //     subjectID = parseInt(cls.slice(2), 10);
      //     break;
      //   }
      // }

      var s = {
        subjectOrder: i,
        subjectID: subjectID
      };
      sessionData.push(s);
    });
    var ses = {
      sessionNo: index,
      sessionData: sessionData
    };
    sessions.push(ses);
  });
  return sessions; // 记得返回结果，原函数缺少这一步
}

关键细节说明 #

1. 遍历<li>元素：用$(this).find('li.draggable')精准定位每个session下的科目列表项，避免了直接处理父容器文本带来的混乱。
2. 提取ID的两种方式：
   • 正则表达式/id(\d+)/会匹配所有以id开头后跟数字的class，捕获组(\d+)会提取出数字部分，再用parseInt转成整数类型。
   • 如果需要兼容不支持startsWith的老浏览器，可以用遍历class列表的方式，找到以id开头的class后，用slice(2)截取掉前两位的id，再转成数字。
3. 返回结果：原函数没有返回session数组，这里补充了return sessions，方便调用函数后获取数据。

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