javascript - 从 css 类中提取 id 值到 javascript 变量

Question

我有一个 ul 菜单，我想从中检索某些信息:

<ul id="form_builder_sortable" class="sortable rightDiv session1">
    <li class="draggable ui-state-highlight item id10" name="Maths">Maths<button onclick="deleteElement(event)" class="delbtn">&times</button></li>
</ul>

我在 javascript 中有一个函数:

function getSessionDatas()
{
    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 s = {
                subjectOrder: i,
                subjectID: subs[session[i]]
            };
            sessionData.push(s);
        }
        var ses = {
            sessionNo: index,
            sessionData: sessionData
        };
        sessions.push(ses);
    });
}

这里:

var s = {subjectOrder:i, subjectID:<get id here>};

我想根据 <li> 的类别分配主题 ID项，在本例中，类中有一个 id10 .如何分配 subjectID在这种情况下到 10？

Answer 1

我建议您使用 data-* 前缀自定义属性，它可以使用 .data(key) 检索方法。

$('.rightDiv li').each(function(index) {
  var id = $(this).data('id')
  console.log(id)
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul id="form_builder_sortable" class="sortable rightDiv session1" >
  <li data-id="10" class="draggable ui-state-highlight item" name="Maths">Maths<button onclick="deleteElement(event)" class="delbtn">&times</button></li>
  <li data-id="11" class="draggable ui-state-highlight item" name="Maths">English<button onclick="deleteElement(event)" class="delbtn">&times</button></li>
</ul>

对于那些不使用 jQuery 的人，同样可以使用 HTMLElement.dataset 获取属性

var id = this.dataset.id;