jquery - 如何在可编辑的 div 中检测 ol 列表自动创建的新 li？

Question

我想检测仅由 ol 在 div 中创建的新 li。我想自动增加新 li 的 id。

注意：新的 li 是由 ol list 创建的，而不是由 onclick 事件创建的。

<div id="txtarea" contenteditable="true">Some text</div>

    var counter = 0;

    $(document).ready(function () {
            var html = "<div class='steps ' style='background-color: #d3d3d3 !important'><ol ><li class='personid'  id='"+  counter++   +"' style='border: solid white 1px'><a href='url-here' >Link Text </a></li></ol><div>";

    $("#txtarea").html(html);


});

Answer 1

您可以通过以下代码执行此操作，我只创建 10 li，如果您愿意，还必须增加。

一些文字

<script type="text/javascript">
    var counter = 0;
    var html = "<div class='steps ' style='background-color: #d3d3d3 !important'><ol >";
    var data = "";
    $(document).ready(function () {
        while (counter < 10) {
            data = data + "<li class='personid'  id='" + counter + "' style='border: solid white 1px'><a href='url-here' >Link Text </a></li>";
            counter = counter + 1;
        }
        html = html + data + "</ol><div>";

        $("#txtarea").html(html);

    });
</script>