javascript - 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 的一个例子是上面的 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() + "' />");