Wrap all non-child HTML into a DOM-element

Question

I am working on a little hyphenation engine for a website, and I got to get my head around this. I am matching all p.hyphenatable and send the content to a PHP-script to have it hyphenated like this:

jQuery(".hyphenatable").each(function() {
    var hyphenatableObject = jQuery(this);

    if (hyphenatableObject.children().size() == 0){ //  Hyphenate only if there is no child elements to prevent HTML from being omitted

        jQuery.ajax({
            type: "POST",
            url: phpHyphenatorUrl,
            data : {
                language:hyphenationLang,
                text: hyphenatableObject.text()
            },
            dataType: "html",
            success: function(data) {
                hyphenatableObject.html(data);
            }
        });
    }
});

To be able to have this script work on elements with children as well, I would like to wrap the non-encapsulated parts of the matched selectore into new elements, and send those to the web service. For example:

<p>My text <img src="img.jpg" /> with image</p>

becomes

<p><span class="whatever">My text</span> <img src="img.jpg" /> <span class="whatever">with image</span></p>

Any ideas on that?

Please post how the `data` content looks like that is returned from the Ajax request. — David Hellsing, Apr 02 '12 at 08:48
possible duplicate of [jQuery Select and wrap textNode](http://stackoverflow.com/questions/5291703/jquery-select-and-wrap-textnode) — Felix Kling, Apr 02 '12 at 08:53
The string is cleaned within the php script (hmtl-tags are beeing removed and more), So the return is plain text. — mritz_p, Apr 02 '12 at 08:55

Wrap all non-child HTML into a DOM-element

0 Answers0