Отображение скрытых элементов JavaScript в другом месте на странице

Question

Обновление: я изменил свой код JavaScript, и теперь я получаю ошибки в консоли отладки iPhone.

Отказ от ответственности : я новичок в Интернетеразработки, и я не слишком хорошо разбираюсь в JavaScript.

Сценарий : я создаю календарь событий с помощью CodeIgniter и скрываю элементы на мобильных устройствах, которые должны отображатьсяв другом месте на странице, когда происходит событие.Скрытые элементы - это <ul> s, и они должны отображаться в другой части страницы, когда выбраны их соответствующие <span> s с классом .day_listing_mobile.Я работал с разными методами, но я не мог найти решение в течение нескольких часов, так как я не силен в области jQuery / Ajax / JavaScript.

Вопрос : Какие методы потребуются для отображения скрытых <ul> на другой части страницы, когда выбраны соответствующие им <span>?

JavaScript (Обновлено) :

(function($) {
    var isMobile = (/iphone|ipad|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));  
    if (isMobile) {
        $('.event_list').hide(); // setting display:none; on all .event_list <ul> elements

        // attach click event to the <span class="day_listing"> elements
        $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('#mobile_show_content').append(eventList);
        });
    }

})(jQuery);

Я получаю эту ошибку в этой строке кода var $eventList = $(this).sibling('.event_list').clone();:

Шаблон календаря CodeIgniter (контроллер) :

            {cal_cell_content}      
                <span class="day_listing_mobile">
                    {day}
                </span>
                <ul class="event_list">
                    {content}       
                </ul>
            {/cal_cell_content}

            {cal_cell_content_today}
                <span class="day_listing_mobile" id="today_listing">
                    {day}
                </span>
                <ul class="event_list">
                    {content}   
                </ul>
            {/cal_cell_content_today}

Вид :

<div class="row">
    <div class="twelve columns">
        <?php echo $calendar; ?>
    </div>
</div>
<div class="show-on-phones">
    <div class="row">
        <div class="twelve columns" id="mobile_show_content">
           <!--I want the <ul>s to show up here-->  
        </div>
    </div>
</div>

Обратите внимание, что класс календаря CodeIgniter создается выше, где я хочу отобразить<ul> s.

Answer 1

Просто измените ваше click событие, чтобы перемещать данные по домену.

  $('.day_listing_mobile').click(function() {
            var eventList = $(this).sibling('.event_list').clone();
            $(this).sibling('.event_list').remove();
            $('.mobile_show_content').append(eventList);
        });

Answer 2

Вы можете удалить узел из DOM и повторно добавить его в другое место. (.remove () и .append ())

Но вместо того, чтобы пытаться решить эту проблему в javascript, почему бы не создать свою страницу с учетом адаптивности, используя селекторы css для переформатирования страницы при определенной ширине порта представления.

Проверьте это: http://www.alistapart.com/articles/responsive-web-design/