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

Question

我有一个 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');
    }
});

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

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

我的问题：你知道不使用 id 的方法吗？

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

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

Answer 1

“你知道不使用 id 的方法吗？”

是的，或者至少没有每个项目的唯一 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 和索引号。

Answer 2

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

$('li').each(function () {
    $(this).attr("id", "listItem" + ($(this).index() + 1));
});

无需手动完成所有繁重的工作。

Answer 3

我认为您试图以错误的方式解决此问题。如果您只是要更新它，则无需将元素的位置存储在 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');
});

希望这会有所帮助！