Javascript 如何在keyup上将Id属性分配给contenteditable div的所有子级？

我尝试了以下方法：

HTML:

<div contenteditable="true" id="editable"></div>

JS:

$（“#可编辑”）.keyup（函数（）{
addID（）；
});
函数addID（）
{
$（“#可编辑*”）。每个（函数（）{
var t=GenerateID（）；
$（this.attr（'id'，'id-'+t）；
});
}
函数GenerateID（）
{
var str='ABCDEFGHIjklmnopqrstuvxyz012456789'；
变量字母表=“”，
genID=''；
while（genID.length<5）
{
字母表=str.charAt（Math.floor（Math.random（）*str.length））；
genID+=字母表；
}
返回genID；
}

但在每一次按键操作中，它都会不断更改ID

如何在键入时只为所有元素设置一次

id

，并在整个

div

中保持其唯一性

试试这个：

$('#editable').keyup(addID);
function addID() {
    $('#editable *').each(function () {
        var t = GenerateID();
        var elem = $(this);
        var attr = elem.attr('id');
        if (!attr) {
            elem.attr('id', 'id-' + t);
        }
    });
}
/**
 * @return {string}
 */
function GenerateID() {
    var str = 'abcdefghijklmnopqrstuvwxyz0123456789';
    var alphabet = '',
            genID = '';
    while (genID.length < 5) {
        alphabet = str.charAt(Math.floor(Math.random() * str.length));
        genID += alphabet;
    }
    return genID;
}

$（“#可编辑”）.keyup（addID）；
函数addID（）{
$（'#可编辑*'）。每个（函数（）{
var t=GenerateID（）；
var elem=$（本）；
var attr=elem.attr（'id'）；
如果（！attr）{
元素属性（'id'，'id-'+t）；
}
});
}
/**
*@return{string}
*/
函数GenerateID（）{
var str='ABCDEFGHIjklmnopqrstuvxyz012456789'；
变量字母表=“”，
genID=''；
while（genID.length<5）{
字母表=str.charAt（Math.floor（Math.random（）*str.length））；
genID+=字母表；
}
返回genID；
}

也可以考虑，您的随机字符串生成器可能再次生成相同的字符串。

---

上次更新： 现在我检查了你小提琴上的代码，我肯定它能用。唯一性检查可能会被做成一个函数，但我将把它留给您：

$('#editable').on( 'keyup', addID );


var count = 0;  // this will absolutely ensure that ID will be unique

function addID(){  

    var previousIDs = [];

    $('#editable *').each(function() {

        count++;
        var thisID = $(this).attr( 'id' );

        // let's check if we have duplicates:
        var index = 0, len = previousIDs.length, isDuplicate = false;

        for( index = 0; index < len; index++ ){
            if ( thisID === previousIDs[index] ) { 
                isDuplicate = true; 
                break;
            }
        }


        // now change the ID if needed:
        if (  isDuplicate    ||    ! thisID  ){

            var t = GenerateID();
            var newID = 'id-' + t + '-' + count;

            $(this).attr('id', newID);
            previousIDs.push( newID );

        }else{
            previousIDs.push( thisID );
        }

    });
}

$（'#可编辑'）。在（'keyup'，addID）上；
变量计数=0；//这将绝对确保ID是唯一的
函数addID（）{
var-previousIDs=[]；
$（“#可编辑*”）。每个（函数（）{
计数++；
var thisID=$（this.attr（'id'）；
//让我们检查一下是否有重复项：
var指数=0，len=previousIDs.length，isDuplicate=false；
对于（索引=0；索引

---

工作

将代码替换为以下内容：

$('#editable *').each(function() {

        if(!$(this).hasClass("idgenerated")){
            console.log( $(this).attr('id') );

            var t = GenerateID();

            $(this).attr('id','id-' + t);
            $(this).addClass("idgenerated");
            console.log($(this).prop("tagName") + ' = ' + t);
        }
});

---

检查其是否已设置？如果是，就不要再设置它了？@x4rf41，比如用哪种方式？我试过了，但用了另一种方式。它只设置一次，但在接下来的连续元素中重复ID值。我想你的问题是不完整的$（“#editable*”）返回什么？它返回

#editable

divI中的每个元素在您提供的小提琴中看不到任何元素检查控制台。This

$（This.prop（“标记名”）+'='+t

在每个同样重复id值的keyup上记录以下内容：DIV=j5728！让我直截了当地说：您希望为

#editable

的所有子级提供一个唯一的ID，并且您希望在用户第一次按键时这样做。之后，停止更改ID。我的理解正确吗？停止更改一次设置的ID。根据您的建议，它只分配一次ID，但当您点击enter键时，contenteditable div会创建另一个

div

，并为其分配与前一个相同的值。正如文档所说，id的值在整个文档中应该是唯一的。我没有看到任何创建新div的代码！它在哪里？请在浏览器的检查器中进行检查！设置一个元素的if后不起作用。它仍然分配相同的id:

div1div2div3

$('#editable *').each(function() {

        if(!$(this).hasClass("idgenerated")){
            console.log( $(this).attr('id') );

            var t = GenerateID();

            $(this).attr('id','id-' + t);
            $(this).addClass("idgenerated");
            console.log($(this).prop("tagName") + ' = ' + t);
        }
});