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

Question

我有一个 div，其中包含一个在加载事件中使用 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');
    }
});

演示:http://jsfiddle.net/frankroger/FKUkb/32/

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

我的问题:您知道不使用 ID 的方法吗？

我想对标题、段落、链接等所有元素做同样的事情...我不想为每个 html 元素创建一个唯一的 id。

创建类似系统的另一种方法是让用户在某些 document.execCommand(一种所见即所得)的帮助下直接将 html 元素插入可编辑的 div 中。通过这种方式，用户可以在可编辑的 div 中直接编辑元素文本，毕竟我应该做的是获取 html 并将其存储在数据库中......但我不想处理不同的浏览器行为...... .例如，当您按下 ENTER 键时，FF 插入 BR、webkit DIV 和 IE/Opera P...

Answer 1

"do you know a way to do this without using ids?"

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

只要在被点击的时候给被点击的列表项一个ID即可。此 ID 一次只会分配给一个项目。

http://jsfiddle.net/EH82q/

$(document).on( "click", "li", function() {
    // Just in case there's an previous item clicked, remove the ID.
    $("#active").prop("id", "");

    // give the `LI` the ID "active"
    this.id = "active";
    $("#editor").text($(this).text());
});

然后在进行替换时使用并删除该 ID。

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

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