Question

I have html in a var that I am trying to edit. I want to move the UL with class “files” to its own var then remove it from the data var.

I have this so far but doing it wrong. I cant seem to understand it.

var data = '<ul class="dirs"><li class="d"><a href="#" rel="/Games/">Games</a></li><liclass="d"><a href="#" rel="/Log/">Log</a></li></ul><ul class="files"><li class="f"><a href="#">fubar.txt</a></li><li class="f"><a href="#">fubar2.txt</a></li></ul>';

var files = $(data).find("UL.files").html();

Expected Result:

data = '<ul class="dirs"><li class="d"><a href="#" rel="/Games/">Games</a></li><li class="d"><a href="#" rel="/Log/">Log</a></li></ul>';

files = '<ul class="files"><li class="f"><a href="#">fubar.txt</a></li><li class="f"><a href="#">fubar2.txt</a></li></ul>';

Thanks

Answer 1

You can’t modify the string, but you can create new strings.

var data = '<ul class="dirs"><li class="d"><a href="#" rel="/Games/">Games</a></li><liclass="d"><a href="#" rel="/Log/">Log</a></li></ul><ul class="files"><li class="f"><a href="#">fubar.txt</a></li><li class="f"><a href="#">fubar2.txt</a></li></ul>';

var ul1 = $(data).filter('ul')[0];
var ul2 = $(data).filter('ul')[1];

var files1 = ul1.outerHTML || $('<div>').append(ul1).html();
var files2 = ul2.outerHTML || $('<div>').append(ul2).html();

This places a new UL element into ul1 and ul2. Then to get the html string, you use the .outerHTML property.

Because Firefox doesn’t support outerHTML, you need a hack to make it browser compliant.

Example output: http://jsfiddle.net/bjgLV/