1

我正在尝试编写一个简单的 CMS，用户可以在其中在 contenteditable DIV 中添加新段落。此外，所有段落的 id 都必须重新编号。我能够通过 jquery 完成以下代码来做到这一点：

<div class="wrap" contenteditable="true">
    <p class="paragraph" id="parg1" onclick="createNewP('parg1');">  
    Press ENTER at the end of text - works!</p>
    <p class="paragraph" id="parg2" onclick="createNewP('parg2');">  
    Press ENTER in the middle of text - pargId is undefined!</p>
</div>
<div class="showPargId">
    newpargId:<br />
</div>

js：

function createNewP(pargId){ 
    $('.paragraph').removeClass('active');
    $('#' + pargId).addClass('active');
}
$(function(){
    $('.wrap').keyup(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == '13') { //create new <p> by pressing ENTER and renumber all <p> id's
            $('.paragraph').removeClass('active');
            var pSum = $('.paragraph').length;
            var i = 1;
            if ( i < pSum ) {
                $('.paragraph').each(function(){
                    $(this).attr('id' , 'parg' + i).attr("onclick" , "createNewP('parg" + i + "');");
                    i++;                    
                });
            }
            var newpargId = window.getSelection().getRangeAt(0).endContainer.id; // id of a new paragraph where the cursor is placed
            $('#' + newpargId).addClass('active');
            $(function(){
                $('.showPargId').append(newpargId + '<br />');                
            });
        } else { //do nothing
        }
    });
});

一切都很好，除了 window.getSelection().getRangeAt(0).endContainer.id; 仅当按下 ENTER 时文本光标位于段落中文本的末尾时，它才会给我父 .paragraph 的 ID。但如果光标位于文本中间，则“newpargId”id 未定义。

你可以在jsFiddle上查看

有什么方法可以获取 textNode 父 ID？像：

window.getSelection().getRangeAt(0).parent().attr('id');

我在尝试：

$((newpargId).parentNode.id);

但它不起作用:(

4

1 回答 1

0

您可以closest为此使用：

$(window.getSelection().getRangeAt(0).endContainer).closest("[id]").attr("id");

更新小提琴

closest查找与给定选择器匹配的第一个元素，从当前元素开始，然后查看祖先。选择器[id]匹配具有id属性的元素。

或者如果出于某种原因你想在没有 jQuery 的情况下这样做：

var parent = window.getSelection().getRangeAt(0).endContainer;
var newpargId = parent.id;
while (!newpargId && parent && parent.nodeName.toUpperCase() !== "BODY") {
    parent = parent.parentNode;
    newpargId = parent.id;
}

更新小提琴

于 2013-07-05T11:43:50.197 回答