在页面上的其他位置显示JavaScript隐藏元素

Question

更新：我更改了我的JavaScript代码，现在我在iPhone调试控制台中收到错误。

免责声明：我是网络开发的新手，我对JavaScript不太满意。

场景：我正在使用CodeIgniter构建一个事件日历，并且我正在隐藏移动设备上的元素，这些元素需要在事件发生时显示在页面的其他位置。隐藏的元素是<ul> s，当选择了与<span>类相关的.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>的位置。

Answer 1

您可以从DOM中删除该节点，然后将其重新附加到其他位置。 （.remove（）和.append（））

但是，为什么不在javascript中尝试解决这个问题，为什么不使用css选择器来设计具有适应性的页面，以在特定的视口宽度下重排页面。

检查一下： http://www.alistapart.com/articles/responsive-web-design/

Answer 2

只需修改您的click事件即可在dom周围移动数据。

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