retrieve objects own tag

Question

I am using jQuery to sort a list of li tags, My current code is:

var arr = [];
$("ul li").each(function() {
    arr.push($(this));
});
arr.sort(cmpFunction);
$("ul").find("li").remove();
$.each(arr, function(index, item){
    console.log(item.html());
});

What i'm finding with the console.log though - is I am losing the outside containing li tag (with the html5 data attributes that I want to keep)

Is there another option to .html() that will give me the objects li tag as well

I have provided a simple example of what I need here: http://jsbin.com/esalas/5

isn't this just a duplication of this question: http://stackoverflow.com/questions/2419749/get-selected-elements-outer-html ? — Chris Whittington, Mar 28 '12 at 10:34

score 6 · Accepted Answer · edited Jun 13 '12 at 13:08

6

There is no inbuilt function in jQuery to do this. The workaround is to wrap the element in another, and then get the html() of that:

$.each(arr, function(index, item) {
    var html = item.wrap("<div></div>").parent().html();
    console.log(html);
});

You could also revert back to native Javascript and use outerHTML - although I've not tested this:

$.each(arr, function(index, item) {
    console.log(item[0].outerHTML);
});

edited Jun 13 '12 at 13:08

Jon Adams

24,464
18
82
120

answered Mar 28 '12 at 10:34

Rory McCrossan

331,213
40
305
339

all good, but outerHtml() should be outerHTML (not a function). – parserr Mar 28 '12 at 10:37

retrieve objects own tag

1 Answers1