Копировать элементы списка из одного списка в другой с помощью jQuery

Question

Я пытаюсь получить список элементов из одного списка и поместить его в другой список.

Вот что у меня есть:

$("#change").click(function () {
    arr = $('#old').map(function () {
        return $(this).text();
    }).get();

    $.each(arr, function (index, item) {
        $('#test').append($( "<ul><li>" + item + " at " + index +"</li>" ));
    });
});

HTML:

<ul id="old">
    <li>One</li><li>Two</li><li>Three</li>
</ul>
<ul id="new"></ul>

Он взял бы предметы из old и поместил бы их в new.Кажется, что он помещает все элементы в один <li>, когда он помещает его в new.

Answer 1

Просто clone() и appendTo() сначала новый список:

$('#old > li').clone().appendTo('#new');

А затем измените их text():

$('#new > li').text(function (index, text) {
    return text + ' at ' + index;
});

Рабочая демонстрация: http://jsfiddle.net/vkYUQ/.

---

Или объедините вышеперечисленное в одно утверждение:

$('#old > li').clone().text(function (index, text) {
    return text + ' at ' + index;
}).appendTo('#new');

Answer 2

$(document).ready(function() {
    $("#change").click(function() {
        var old = $("#old");
        var items = $("#old li");
        var newList = $("#new");
        items.each(function(index, value){
            newList.append(value);
        });
        old.empty();
        return false;
    });
});

Answer 3

Вы можете использовать data() для копирования и сохранения своего HTML в данных

var $old=$('#old');
$old.data('myhtml',$old.html());

Чтобы вставить копию в #test, вы можете сделать

var x = $old.data('myhtml');
$(x).appendTo('#test');

Answer 4

Сделал для вас скрипку:

http://jsfiddle.net/yEgMK/1/

Теперь, clone() - это один способ, копирование .html() - это другой, и может быть несколько других. Проверьте различия в API jQuery:

http://api.jquery.com/clone/ http://api.jquery.com/html/