select created element

$(iframe).bind('keypress', function (e) {
    if (e.which == 13) {
        var range = iframe.getSelection().getRangeAt(0);
        var nodeText = $(range.startContainer, iframe).parent().html();
        var leftPart = nodeText.substr(0, range.endOffset);
        var rightPart = nodeText.substr(range.endOffset);

        $(range.startContainer, iframe).parent().replaceWith('<big>' + leftPart + '</big><p>' + rightPart + '</p>');
        return false;
    }
});

I've got iframe with开发者_如何学运维 some content, e.g:

<p>someText</p>

When i place cursor between "some" and "text", and press enter, i want it to be splitted into this:

<big>some</big><p>Text</p>

everything seems to be working ok, but I also need to change cursor position to the beginnings of this: <p>Text</p> I know how to set cursor position, but I need to select that element. just $('p', iframe) won't work, because I can have multiply <p> items in iframe. any ideas?

This is an unholy mix of DOM, which considers everything in terms of nodes and offsets, and jQuery-ish HTML-as-strings. The two do not mix well. You've misunderstood the endOffset and startOffset properties of DOM Ranges: they're not offsets within the innerHTML of the container. I suggest looking at MDC or the spec and refactoring your code to only use DOM nodes and not strings of HTML.

Denis ,

Give a common class name to all of them , so that it will effect on the elements.

I would add a dynamic id attribute (or use the metadata plugin) using jQuery to identify the split paragraph. And based on the identified split string place the cursor before the <p> tag. Do make sure to remove the id attribute (or some metadata) once you are done placing the cursor, so that any other splits or a backspace on the same <p> doesn't result in unintended consequences

Hope that helps

I found a nice solution without adding id or class to element. i changed this:

$(range.startContainer, iframe).parent().replaceWith('<big>'+leftPart+'</big><p>'+rightPart+'</p>');

to this:

var leftObject = $('<big>'+leftPart+'</big>');
var rightObject = $('<p>'+rightPart+'</p>');
$(range.startContainer, iframe).parent().replaceWith(leftObject);
leftObject.after(rightObject);

now i got both elements selected in leftObject and rightObject