string from list items after sortableJS has been applied - jquery-ui-sortable

Question

I am tring to get a string from a list after it has been sorted using jquery ui sortable
Using a simple list ( without sorting)
<ul id = "description">
<li>one</li>
<li>two</li>
<li>three</li>
</ul>
and applying
$('#description').text().replace(/(\r\n|\n|\r)/gm," ");
I get: one two three
However if I make the list sortable and move items around, and using
function getOrder() {
alert($("#description").html());//gives a correct html ul
alert($("#description").text());// no spaces between words
var ans = $('#description').text().replace(/(\r\n|\n|\r)/gm," ");
alert("You got " + ans)
};
The output changes to three twoone or threetwoone - spacing messed up. $("description").html()
shows that the html is correct ( style="" gets added to the li tag for some reason) , but $('#description').text().replace(/(\r\n|\n|\r)/gm," "); does not give a properly spaced string.
Why does sorting change the behaviour and what can I do to resolve this? Appreciate any response please

Answer 1

To get the text, I would create a toString function:
function toString(element) {
var children = element.children;
var str = '';
for (var i = 0; i < children.length; i++) {
str += (!i ? '' : ' ') + children[i].textContent;
}
return str;
}
And then call that function with the HTMLElement (not jQuery object) of the list passed in as an argument.
This solution does not utilize jQuery, so you can use it with SortableJS or jQuery Sortable.

Answer 2

$.map( $('li'), function (element) { return $(element).text() }).join(' ');
works to get the list items into a properly spaced string