JQuery 将 id 动态分配给动态生成的 div，在 contenteditable div 内

Question

<div class="pad" id="test" contenteditable="true" spellcheck="false">
    <div id="a0" class="lines" > text1</div>
</div>

我有一个内容可编辑的 div，其中有许多子 div，当用户按下 ENTER 键（使用 jQuery）转到下一行时，这些子 div 会动态生成。子 div 的一个示例是上面的 id= 'a0'。

目标：动态生成唯一的id并分配给这些动态生成的子div。

下面是我用来完成这个任务的jQuery。

function getSelectedNode()

这是返回用户当前正在输入的行（即子 div）的 'id' 的函数。

var lineCount=0;

lineCount 变量的值等于生成的子 div 的总数。

 $(currentLine).next().attr('id','a'+(++lineCount));

这里currentLine包含用户当前正在输入的行的 id。按ENTER键时，新div在当前div之后自动生成，我尝试使用.next()访问并尝试使用.attr('id','a'+(++lineCount))为其分配一个新的ID。

如果我在 jQuery 的选择器子句中传递绝对值，则分配新 id 的过程效果很好，即：

$('#a0').next().attr('id','a'+(++lineCount));

而不是

$(currentLine).next().attr('id','a'+(++lineCount));

var lineCount = 0;
var currentLine = "#a0";

function getSelectedNode() {
    if (document.selection) 
        return document.selection.createRange().parentElement();
    else {
        var selection = window.getSelection();

        if (selection.rangeCount > 0) 
          return selection.getRangeAt(0).startContainer.parentNode;
    }
}


$('.pad').keypress(function (event) {

    var keycode = (event.keyCode ? event.keyCode : event.which);

    if (keycode == '13') {
        var sn = getSelectedNode();
        currentLine = "#" + sn.getAttribute('id');

        $(currentLine).next().attr('id', 'a' + (++lineCount));
    }
});

Answer 1

Javascript 是单线程的，因此您可以为此使用 int...

var indexer = 0;
function getUniqueId(){
   indexer++;
   return indexer.toString();
}

警告：我不建议在大多数 Web 应用程序中在文档级别声明函数和属性。一旦你有了这个方法，它就很容易实现......

$("<div id='myDiv" + getUniqueId() + "' />");