Javascript 增加新的id<；李>；仅由orderd list创建的元素<；ol>；

我想给由ol list自动创建的新li元素增加id

<div id="txtarea" contenteditable="true">Some text</div>
var html2 = "<div class='steps'><ol><li class='personid' id=''><a href='url-here'>Link Text </a></li></ol><div>";
$("#txtarea").html(html2);

一些文本
var html2=“
”；
$（“#txtarea”）.html（html2）；

注意：li元素必须由ol列表自动创建，而不是手动创建（通过for或while循环）

这是js提琴。请首先在JSFIDLE中创建新的li元素。由于ol，新元素将自动创建。然后您将看到。两个li的id将相同

我想增加ol list自动创建的每个新li元素的id。Plz帮助设定你的价值

var i=0;// set your value 

var html2 = "<div class='steps ' ><ol ><li class='personid'  id='"+(++i)+"' ><a href='url-here' >Link Text </a></li></ol><div>";

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

var html2=“

”； $（“#txtarea”）.html（html2）；

---

考虑到

内容可编辑：（从第9版更新）

与下面的想法相同，只是它是在
domandeinserted
事件处理程序中的现有元素上完成的

document.addEventListener("DOMNodeInserted", function(event){
  var element = event.target;
  if (element.tagName == 'LI') {
    var $el = $(element);
    var maxId = 0;
    $el.siblings().each( function() {
        var id = $(this).attr('id');
        if ( id > maxId ) {
            maxId = id;
        }
    });
    $el.attr('id',++maxId);
  }
});


这是最新的提琴：

其思想是获取最后一个li的id，解析为int，然后递增。还可以使用前面的li作为模板，只需替换其内容（
.clone（true）
）-其类、事件、数据等也将被克隆。然后放置新内容（替换最初克隆的内容）

最后，将其包装成一个函数调用，在其中传递要插入的html。这可以在事件处理程序内或某种循环中手动调用。。。干杯

这是牛肉：

function addLi(newHtml) {
    var $lastLi = $('#txtarea ol li').last();
    var lastId = $lastLi.attr('id')||0;
    var $clone = $lastLi.clone(true);
    $clone.attr('id',++lastId).html(newHtml);
    $lastLi.after($clone);
}

以及用法：

addLi('<a href="#">Link text 2</a>');
addLi('<a href="#">Link text 3</a>');

addLi（“”）；
addLi（“”）；

它假设至少存在一个li，并且id属性是数字的（不是混合类型，尽管这可以通过一点
.attr（'id'）
值解析进行重新装配）。
我刚刚修改了您的代码位，希望这可能会对您有所帮助
请查收

var html2 = "<div class='steps ' ><ol ><li class='personid'  id='' ><a href='url-here' >Link Text </a></li></ol><div>";
$("#txtarea").html(html2);
var html2 = "<div class='steps ' ><ol ></ol><div>";
for(i=1;i<10;i++)
{
    var newli="<li id='"+i+"' >link text"+i+"</li>";
    $("#txtarea .steps ol").append(newli);
}

var html2=“
”；
$（“#txtarea”）.html（html2）；
var html2=“”；
对于（i=1；i为了清晰起见，我稍微修改了您的代码（）：

这种方法是错误的，不会起作用。每当再次创建新节点时，i值将被初始化回0。因此，将为所有
li
s生成相同的
id
。要检查新生成的li，请检查控制台日志，li元素的id仍然相同。@user1452376在演示中似乎是附加的只需按enter键创建一次新的li，您就会看到ID将是sameThanks。它的工作原理。是否可以使用任何其他方法来完成，因为document.addEventListener已过时，并且具有兼容性issues@user1452376有一个调用应该可以做到这一点。还要注意，元素只能通过jquery添加y，以便livequery捕获dom插入。@user1452376它不起作用。我只按了两次enter键就尝试了小提琴，两个新添加的项的id值都是1。无论如何，您不能基于上一项创建id：按enter键，选择上一个li，再按enter键。@wared现在怎么样？在列表中查找最大的id兄弟列表和递增、更新的fiddle（也在回答中更新）：您的意思是：“我的列表是可编辑的，按enter键创建新项目。”。更新：，没有dom查询或循环。
var uid = function (uid) {
    return function () {
        return 'item-' + (++uid);
    };
}(0);

document.addEventListener('DOMNodeInserted', function(event){
    var el = event.target;
    if ((el.tagName + '').toLowerCase() === 'li') {
        el.setAttribute('id', uid());
    }
});

$('#txtarea').html(
    '<ol><li id="' + uid() + '">Some text</li></ol>'
);

uid(); // "item-1"
uid(); // "item-2"