Javascript 为便笺分配id

如何将id设置为0,1,2等，并在单击事件时获取其id。下面是便笺的FIDLE代码，我们可以在其中添加多个便笺。我希望将id设置为0,1,2等，并在单击特定便笺时获取其id

（函数（）{
var标记=
'' +
'' +
'' +
'' +
'';
var spawn=function（）{
$（“正文”）.append（makeNote（$（标记））；
};
var remove=function（）{
$（this.parent（）.parent（）.remove（）；
};
var resizeTextArea=函数（）{
var self=$（这是）；
var spaceToGrab=60；
self.find（'.note text'）.height（self.height（）-45）；
};
var hideButtons=函数（元素）{
$（元素）。查找（“a”）.hide（）；
};
var showButtons=函数（元素）{
$（元素）。查找（“a”）.show（）；
};
var save=函数（id、值、位置）{
console.log（id）；//位置
console.log（值）；
控制台日志（位置）；
};
var makeNote=函数（元素）{
变量$note=$（元素）；
$note.resiable({
手柄：“se”
});
$note.draggable({
句柄：“.box头”
});
$text=$note.find（'textarea'）；
$text.focusout（函数（e）{
保存（$（this.oid，$（this.val（），$（this.parent（）.position（））；
});
$note.单击（函数（）{
$（this.find（'textarea'）.focus（）；
});
$note.mouseover（函数（）{
显示按钮（本）；
});
$note.mouseout（函数（）{
隐藏按钮（这个）；
});
$note.find（“.add”）。单击（生成）；
$note.find（“.remove”）。单击（remove）；
$note.resize（resizeTextArea）；
隐藏按钮（注）；
返回$note；
};
$（“.note”）。每个（函数（即，e）{
附注（e）；
});
繁殖（）；
})();
.box{
最小宽度：100px；
最小高度：100px；
利润率：20px；
显示：块；
宽度：200px；
}
.注{
/*框阴影：h-阴影v-阴影模糊扩散颜色嵌入*/
盒影：5px 5px 8px#888；
背景色：石灰；
}
.箱头{
最小高度：30px；
背景色：#E0；
文本对齐：右对齐；
线高：30px；
}
.箱头a{
显示：块；
保证金：4倍；
宽度：20px；
高度：20px；
线高：20px；
字体大小：24px；
文本对齐：居中；
字体大小：粗体；
字体系列：“Helvetica Neue LT”、“Helvetica”、“Arial”、“无衬线”；
文字装饰：无；
颜色：#666；
边界半径：5px；
}
.框标题a：链接，
.箱头a：已访问{
边框：1px实心#e0；
}
.框标题a：悬停，
.框标题a：活动{
边框：1px实心#aaa；
背景色：#ccc；
}
.左{
浮动：左；
}
.对{
浮动：对；
}
.隐藏{
显示：无；
}
.注释文本{
保证金：0；
背景：无；
边界：无；
字体系列：“Helvetica”、“Arial”、“无衬线”；
字体大小：24px；
宽度：100%；
字体：斜体；
调整大小：无；
溢出：自动；
大纲：无；
填充物：5px；
}
.背景灰色{
背景：#ffffff；
/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#ffffff 0%，#E0100%）；
/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#ffffff）、颜色停止（100%、#e0））；
/*铬，Safari4+*/
背景：-webkit线性梯度（顶部，#ffffff 0%，#E0100%）；
/*铬10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#ffffff 0%，#E0 100%）；
/*歌剧院11.10+*/
背景：-ms线性梯度（顶部，#ffffff 0%，#E0 100%）；
/*IE10+*/
背景：线性梯度（至底部，#ffffffff 0%，#e0 100%）；
/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#e0e0'，GradientType=0）；
/*IE6-9*/
}


您只需计算现有元素的数量，即可计算将要插入的元素的id

$note.attr("id", $(".note.box").length + 1);


由于要动态删除和添加元素，因此添加
id
的正确方法是在新添加元素时向所有元素添加id

$(".note.box").add($note).attr('id', function(i, id){ return i; });

但是请注意，对于便笺，ID不是常量

如果您想插入静态ID，那么您必须维护一个计数器，如下面评论中提到的@DBS

您可能需要使用计数器，因为它似乎可以删除注释。（意思是长度值可能会给出相同的“ID”两次）@JohnWick单击where？单击notes，因为您可以看到$note.click（函数（）{$（this.find（'textarea'）.focus（）；}）；谢谢，@RajaprabhuAravindasamy你的回答正是我想要的……你知道我的下一个问题是关于ckeditor的吗it@JohnWick不。如果您认为我的回答解决了您提出的问题，您可以通过将其标记为已接受来结束此问题。问一个新的，有关于ckeditor的详细信息或者你想要的任何东西。这样你才能得到更多的关注，而不仅仅是我。