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/

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

我的问题：您是否知道在不使用ID的情况下执行此操作的方法？

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

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

Answer 1

您可以尝试以编程方式为每个列表元素（以及您想要使用的其他元素）分配自己的ID（我在运行中对此进行了编辑，因此我不确定它是否会立即开箱即用为了你的目的）：

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

不必手动完成所有这些工作。

Answer 2

“你知道如何在不使用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 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');
});

希望这有帮助！

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

3 个答案: