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

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

免责声明：我对web开发是新手，对JavaScript不太在行

场景：我正在使用CodeIgniter构建事件日历，并且我正在移动设备上隐藏事件发生时需要在页面其他位置显示的元素。被隐藏的元素是

s，当它们与类

.day\u listing\u mobile

协同响应时，它们需要显示在页面的另一部分。我一直在使用不同的方法，但由于我在jQuery/Ajax/JavaScript领域的能力不强，我已经好几个小时没有找到解决方案了

问题：当选择相应的

时，需要什么方法使隐藏的

显示在页面的不同部分

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

查看：

            {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 calendar类在上面生成，我想在其中显示

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

但是，与其尝试用javascript解决这个问题，为什么不在设计页面时考虑到适应性，使用css选择器以特定的视图端口宽度回流页面呢

看看这个：
只需修改
单击事件即可在dom中移动数据

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

顺便说一句-在附加元素之前不必删除它-如果将当前dom中的元素附加到其他位置，那么它会移动该元素。好的，我打开了调试器，当我选择类为
.day\u listing\u mobile
的
时，错误如下所示
JavaScript:Error undefined TypeError:“undefined”不是一个函数
你能用你写的代码和一个指向断开行的指针来更新你的问题吗？在这行代码var$eventList=$（this.sibling（'.event_list'）.clone（）上收到这个错误（JavaScript:Error undefined TypeError:“undefined”不是一个函数）；有什么想法吗？这就是我开始为回应你的评论而写的例子。在手机上打开JS调试并查看错误。但实际上，用户代理检测是一个非常糟糕的主意，您应该考虑如何使用css选择器根据客户端窗口的宽度重新显示页面，而不是强制移动电话与众不同。手机上的safari具有与桌面上相同的css/js/html解析器/呈现程序，请将其视为。在这行代码中收到此错误（JavaScript:error undefined TypeError:“undefined”不是一个函数）var$eventList=$（this）.sibling（'.event_list'）.clone（）；有什么想法吗？