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

Я пытаюсь написать простую CMS, в которой пользователь может добавлять новые абзацы в contenteditable 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>

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 только в том случае, если текстовый курсор был помещен в конец текста в абзаце при нажатии клавиши ENTER. Но если курсор находится в середине текста, то идентификатор "newpargId" не определен.

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

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

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

Я пытался:

$((newpargId).parentNode.id);

Но это не работает :(


jquery textnode parent-node parentid
person kacpaa    schedule 05.07.2013    source источник
comment
Почему все абзацы должны иметь id в первую очередь? (Просто любопытно.)   -  person T.J. Crowder    schedule 05.07.2013
comment
Они нужны мне позже (с идентификатором абзаца я буду отображать панель инструментов для редактирования текста в этом конкретном абзаце, а панель инструментов будет иметь id=pargIDtoolbar).   -  person kacpaa    schedule 05.07.2013

Ответы (1)


arrow_upward
0
arrow_downward

Для этого вы можете использовать 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;
}

Обновлен скрипт

person T.J. Crowder    schedule 05.07.2013