Jquery найти () элемент за классом, а затем удалить его

Question

У меня есть HTML в VAR, который я пытаюсь изменить. Я хочу переместить UL с классом "files" в собственную переменную, а затем удалить его из var.

Пока у меня есть это, но я делаю это неправильно. Кажется, я не понимаю этого.

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();

Ожидаемый результат:

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>';

Спасибо

Answer 1

Вы не можете изменять строку, но вы можете создавать новые строки.

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();

Это помещает новый элемент UL в ul1 и ul2. Затем, чтобы получить строку html, вы используете свойство .outerHTML.

Поскольку Firefox не поддерживает outerHTML, вам нужен хак, чтобы сделать его совместимым с браузером.

Пример вывода: http://jsfiddle.net/bjgLV/

Answer 2

Попробуйте это

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();

Answer 3

взгляните на это: http://jsfiddle.net/kcAn3/

код, который вы использовали ранее, не соответствует схеме валидации w3c, и я предполагаю, что учетные записи jquery

Answer 4

Я обнаружил, что $(data) не производит весь HTML, который вы хотели. Попробуйте запустить $(data).html()

Выход: "<li class="d"><a href="#" rel="/Games/">Games</a></li><liclass="d"><a href="#" rel="/Log/">Log</a></liclass="d">"