Javascript 编辑并替换没有元素ID的DOM节点

我有一个div，其中有一个在load事件中使用jQuery创建的列表。单击列表项时，项目文本将复制到可编辑的div。编辑文本后，单击按钮，新列表项文本将被替换。代码如下：

<div id="div"></div> 
<div id="editor" contenteditable='true'></div>
<input type="button" value="replace text" id="replace"/>

Javascript

var listID, itemINDEX;

var item1 = $( "<li/>", {
    "id": "li1", 
    text: "list 1 - item 1", 
    click: function() { 
    //alert( jQuery(this).index() );    
    }
});
var item2 = $( "<li/>", {"class": "test3", text: "list 1 - item 2"});
var list1 = $( "<ol/>", {"id": "list-1"}).append( item1 ).append( item2 );
list1.appendTo('#div');

$(document).on( "click", "li", function(){
    $("#editor").text( $(this).text() );
    itemINDEX = $(this).index();
    listID = $(this).closest("ol").attr("id");
} );

$('#replace').click(function(){
    if(listID){                
        $("#"+listID).find("li").eq(itemINDEX).text( $("#editor").text() );
    } else { 
        alert('this list have no id! I dont know where the text goes');
    }
});

var-listID，itemINDEX；
var item1=$（“
”{
“id”：“li1”，
正文：“清单1-项目1”，
单击：函数（）{
//警报（jQuery（this.index（））；
}
});
var item2=$（“
”，{“类”：“test3”，文本：“列表1-项2”}）；
var list1=$（“”，{“id”：“list-1”}）.append（item1.append（item2）；
清单1.附录（“#div”）；
$（文档）。在（“单击”，“li”，函数（）上）{
$（“#编辑器”）.text（$（this.text（））；
itemINDEX=$（this.index（）；
listID=$（this）.closest（“ol”）.attr（“id”）；
} );
$（“#替换”）。单击（函数（）{
if（listID）{
$（“#“+listID）.find（“li”）.eq（itemINDEX）.text（$（“#编辑器”）.text（））；
}否则{
警报（'此列表没有id！我不知道文本去哪里'）；
}
});

演示：

正如您所见，列表id是使用jquery动态创建的。这个id允许我找到列表并在正确的位置替换文本

我的问题：你知道一种不用ID的方法吗

我想对所有元素都做同样的事情，比如标题、段落、链接……我不想为每个html元素创建唯一的id

---

创建类似系统的另一种方法是让用户在某个document.execCommand（一种WYSIWYG）的帮助下直接在可编辑的div中插入html元素。通过这种方式，用户可以直接在editable div中编辑元素文本，我要做的就是获取html并将其存储在DB中…但我不想处理不同的浏览器组件…例如，当您按ENTER键时，FF insert BR，webkit DIV和IE/Opera P.

您可以尝试通过编程方式为每个列表元素（以及您想要使用的其他元素）分配自己的id（我动态编辑了此项，因此我不确定它是否会立即运行）：

这将使繁重的工作不再需要手动完成

“您知道一种不用ID的方法吗？”

是，或者至少没有每个项目的唯一ID

单击列表项时，只需给它一个ID即可。此ID一次仅分配给一个项目

然后在进行更换时使用并移除该ID

$('#replace').click(function() {
    // select the "active" element, update its text, and remove the "active" ID
    $("#active").text($("#editor").text()).prop("id", "");
});

---

这样就不需要共享变量、单个ID和索引号。

我认为您试图以错误的方式解决这个问题。如果只想更新元素，则不需要在DOM中存储元素的位置。只需将jQuery对象作为变量指向元素即可。更新元素后，变量为空或

null

我已经更新了你的JS，让你明白我的意思

// Creating a global variable to store a reference to the list item 
// currently being edited.
var listItem = null;

// No need to give any element you create an ID
var item1 = $( "<li/>", { text: "list 1 - item 1" });
var item2 = $( "<li/>", {"class": "test3", text: "list 1 - item 2"});
var list1 = $( "<ol/>", {"id": "list-1"}).append( item1 ).append( item2 );
list1.appendTo('#div');

$(document).on( "click", "li", function() {
    $("#editor").text( $(this).text() );

    // Storing the jQuery object for the list element into our variable.
    listItem = $(this);
});

$('#replace').click(function() {
    if(listItem != null) {
        // Replacing the text in our selected list item and then
        // clearing the reference to the list item from our memory.
        listItem.text( $("#editor").text() );
        $("#editor").text("");
        listItem = null;
    } else { 
        alert('Pick an item to replace the text in first!');
    }
});

// Nothing changed here...
$('#addlist').click(function() {    
    var i1 = $( "<li/>", {text: "list - item"});    
    var i2 = $( "<li/>", {text: "list - item"});
    var list =  $( "<ol/>").append( i1 ).append( i2 );  
    list.appendTo('#div');
});

//创建全局变量以存储对列表项的引用
//目前正在编辑。
var listItem=null；
//不需要为创建的任何元素提供ID
var item1=$（“
，{text:“列表1-项目1”}）；
var item2=$（“
”，{“类”：“test3”，文本：“列表1-项2”}）；
var list1=$（“”，{“id”：“list-1”}）.append（item1.append（item2）；
清单1.附录（“#div”）；
$（文档）。在（“单击”，“li”，函数（）上）{
$（“#编辑器”）.text（$（this.text（））；
//将列表元素的jQuery对象存储到变量中。
listItem=$（此项）；
});
$（“#替换”）。单击（函数（）{
如果（listItem！=null）{
//替换所选列表项中的文本，然后
//从内存中清除对列表项的引用。
text（$（“#编辑器”）.text（））；
$（“#编辑器”）.text（“”）；
listItem=null；
}否则{
警报（'选择一个项目以替换第一个中的文本！'）；
}
});
//这里什么都没变。。。
$（'#addlist'）。单击（函数（）{
var i1=$（“
，{text:“列表项”}）；
var i2=$（“
，{text:“列表项”}）；
变量列表=$（“”）。追加（i1）。追加（i2）；
列表。附录（“#div”）；
});

---

希望这有帮助

使用.class或标记名。例如：

$（'li'）.text（'hello'）；//所有
标签都会有文本hello

您是100%反对为每个元素使用id，还是不想手动为每个标签分配id？我不想手动为每个标签分配id…@Frank:不客气，仅供参考，我只是更新了它，以检查单击某个元素时是否有当前的“活动”项，并删除其ID。这只是为了防止您单击一个项目，然后单击下一个项目，这样就不会有两个项目具有“活动”ID。谢谢您，哈桑！将jquery对象存储在变量中与将临时id分配给对象…几乎相同…不？嘿@Frank，分配临时id与将对象存储在变量中并不完全相同。存储对元素的引用比分配临时ID更有效，因为首先您不必担心检查其他元素是否具有完全相同的ID，这可以避免/jQuery为ID遍历整个DOM，随着越来越多的元素添加到DOM中，这可能会变得效率低下。其次，在可伸缩性方面，当您可以为不同的元素使用多个变量时，您不必通过对ID的多次检查来管理多个ID名称。

$('#replace').click(function() {
    // select the "active" element, update its text, and remove the "active" ID
    $("#active").text($("#editor").text()).prop("id", "");
});

// Creating a global variable to store a reference to the list item 
// currently being edited.
var listItem = null;

// No need to give any element you create an ID
var item1 = $( "<li/>", { text: "list 1 - item 1" });
var item2 = $( "<li/>", {"class": "test3", text: "list 1 - item 2"});
var list1 = $( "<ol/>", {"id": "list-1"}).append( item1 ).append( item2 );
list1.appendTo('#div');

$(document).on( "click", "li", function() {
    $("#editor").text( $(this).text() );

    // Storing the jQuery object for the list element into our variable.
    listItem = $(this);
});

$('#replace').click(function() {
    if(listItem != null) {
        // Replacing the text in our selected list item and then
        // clearing the reference to the list item from our memory.
        listItem.text( $("#editor").text() );
        $("#editor").text("");
        listItem = null;
    } else { 
        alert('Pick an item to replace the text in first!');
    }
});

// Nothing changed here...
$('#addlist').click(function() {    
    var i1 = $( "<li/>", {text: "list - item"});    
    var i2 = $( "<li/>", {text: "list - item"});
    var list =  $( "<ol/>").append( i1 ).append( i2 );  
    list.appendTo('#div');
});