jQuery получает содержимое других элементов при загрузке страницы

Question

С большой помощью от пользователей stackoverflow я написал скрипт, который работает как в демонстрации ниже:

DEMO

Проблема заключается в заполнении ul # selected_items данными из h2 в последовательном порядке при загрузке страницы. Как вы можете видеть, ul # selected_items теперь написаны вручную, и мне нужно, чтобы они динамически заполнялись при загрузке страницы.
Я довольно новичок в jQuery и уже некоторое время пытаюсь выяснить это безрезультатно. Мы будем благодарны за любую помощь.

Answer 1

Вы хотите создать li динамически при загрузке страницы?
Затем удалите их из ul в вашем HTML и добавьте этот JavaScript:

$(document).ready(function() {
    $('.holder h2').each(function() {
        $('#selected_items').append('<li selected-item="' + $(this).parent().attr('id') + '_selected">' + $(this).text() + '</li>');
    });
});

Также см. ваш обновленный пример .