Question

我有一个满足的div，在这个div中，我有3个节点

<div id="editable" contenteditable="true"><span>dear</span>world<span>hello</span></div>

在这种情况下，如果我们使用以下代码：

console.log(document.getElementById('editable').childNodes)

我们会有类似[span, text, span]的内容。如何获取正在编辑的节点的索引。例如，如果用户正在编辑单词dear，我应该得到索引“0”，因为它是第一个节点，如果用户正在编辑单词hello，我应该获取索引“2”

我有一个能够返回我正在编辑的实际节点的函数，但我不确定会有所帮助。请参阅jsfiddle。

Answer 1

我会将文本节点包装在spans中，所以你只有元素节点，只需使用jQuery的index()来获取索引

$('#editable').on('keydown', function(e){
    var _node = document.getSelection().anchorNode; 
    var node  = _node.nodeType == 3 ? _node.parentNode : _node;
    var index = $(this).children().index(node);

    console.log( index ); // output index

}).contents().each(function(i, node) {
    if (node.nodeType === 3) {
        $(node).wrap('<span />');
    }
});

FIDDLE

Answer 2

这里有一个更简单的方法来获得你想要的东西：

var node = null;
node = window.getSelection().getRangeAt(0).commonAncestorContainer;
node = ((node.nodeType===1)?node:node.parentNode);    

var idx = Array.prototype.indexOf.call(node.parentNode.childNodes,node);

idx将根据您的需要正确显示。

如何在可信任的div

2 个答案: