CODEWITHSUNDEEP
jqueryfind
Joe
Joe

Reputation: 3

Jquery find() element by class then remove it

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

Upvotes: 0

Views: 2856

Answers (4)

ShankarSangoli
ShankarSangoli

Reputation: 69905

Try this

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 $uls = $(data).filter("ul").wrap("<div>");

data = $uls.first().parent().html();
file = $uls.last().parent().html();

Upvotes: 0

user113716
user113716

Reputation: 322492

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/

Upvotes: 2

Baz1nga
Baz1nga

Reputation: 15579

take a look at this:http://jsfiddle.net/kcAn3/

the code that you had earlier dint pass the w3c validation scheme and I am guessing jquery accounts that

Upvotes: 0

rdrey
rdrey

Reputation: 9529

I found that $(data) is not producing the whole html you wanted. Try running $(data).html()

The output: "<li class="d"><a href="#" rel="/Games/">Games</a></li><liclass="d"><a href="#" rel="/Log/">Log</a></liclass="d">"

Upvotes: 0

Related Questions