如何获取textNode.parentNode id？

Question

我正在尝试写一个简单的CMS，用户可以在内容可编辑的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；，它给我一个父.paragraph的id，只有当文本光标放在段落中文本的末尾时，按ENTER键。但是如果光标放在文本的中间，则"newpargId“id未定义。

你可以在jsFiddle上查看

有没有获取textNode家长ID的方法？像这样：

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

我在试着：

$((newpargId).parentNode.id);

但是它不工作:(

Answer 1

您可以使用closest来实现此目的：

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

Updated Fiddle

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;
}

Updated Fiddle