Как получить идентификатор textNode.parentNode?

Question

Я пытаюсь написать простую CMS, где пользователь может добавлять новые абзацы в контентную DIV. И все идентификаторы абзаца должны быть переименованы. Я был в состоянии сделать это с помощью 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> 

ЯШ:.

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; Это дает мне id родительского .paragraph, только если текстовый курсор был помещен в конце текста в абзаце, когда был нажат ENTER. Но если курсор помещен в середине текста, идентификатор «newpargId» не определен.

Вы можете проверить его на jsFiddle

Есть ли способ, чтобы получить TextNode родительский идентификатор? как:

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