javascript - 增加仅由有序列表 创建的新 元素的 id

Question

我想将递增的 id 赋予由 ol list 自动创建的新 li 元素

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

注意: li 元素必须由 ol list 自动创建，而不是手动创建(通过 for 或 while 循环)

这是js fiddle。请先在jsfiddle中创建新的li元素。新元素会因为ol而自动创建。然后uyou将看到。两个li的id将相同

http://jsfiddle.net/younis764/rWcKu/4/

我想为 ol list 自动创建的每个新 li 元素提供递增的 id。请帮忙

Answer 1

考虑到contenteditable:http://jsfiddle.net/rWcKu/10/ (从修订版 9 更新)

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

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

<小时/>

这是更新的 fiddle :http://jsfiddle.net/rWcKu/8/

想法是获取最后一个 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>');

它假设至少存在一个 li，并且 id 属性是数字(不是混合类型，尽管这可以通过一点 .attr('id') 值解析进行改造) .