An Efficient Way To Change This DOM Structure In JQuery

i want to reform the structure of a certain element. currently, it roughly resembles this structure.

stray

Solution 1:

Easiest way seems to be to append the rest of the content to the first a element:

$('li').each(function() {
    var first = $('a.unitWrapper', this).first();
    first.removeClass('unitWrapper')
         .append(first.siblings())
         .contents()
         .filter(function(){                         
             return this.nodeType == 3;   //get all stray text nodes
         })        
         .wrapAll("<p/>");
});

http://jsfiddle.net/infernalbadger/wA3EJ/3/

Cant find a way to wrap the stray text nodes easier than this