Jquery 根据屏幕大小在标题中插入div？

我有一个与购物车插件一起工作的div，该插件在侧边栏中显示购物车

我正在建立的网站是响应性的，在设计中，当屏幕大小低于1024px时，Items div会被移动到网站的标题中

我试着用媒体查询隐藏和显示div，但它们都有相同的ID，所以我想做的是，在1024处，侧边栏中有项目，如果屏幕大小调整到该值以下，则从侧边栏中删除项目并将其添加到标题中

这可能吗

---

很抱歉，如果这看起来是一个简单的解决方案，

您可以使用jQuery检查窗口宽度，并根据大小显示和隐藏基本div

if($(window).width() >= 1024) {
      $("#div1").show();
      $("#div2").hide();
} else {
      $("#div1").hide();
      $("#div2").show();
}

---

也许像这样的东西还没有经过测试，但应该给你一个方法的总体思路。基本上，它会检查窗口大小的调整。如果小于1024，items div将被删除并附加到标头。否则，它将被重新附加到侧栏，假设它已经附加到标题

    function itemsToHeader(){


        $items = $('#items');

        if( $(window).innerheight() < 1024 ){

            if( $('#header').find('#items').length <= 0 ){
                $items.remove().appendTo('#header');
            }

        }else{
            if( $('#header').find('#items').length > 0 ){
                $items.remove().appendTo('#sideBar');
            }
        }

    }

    $(window).on('resize', function(){

        itemsToHeader();

    });

    itemsToHeader();

---

您不应该为不同的元素放置相同的id。Id应该使用一次。这就是问题所在，有一个ajax购物车连接到显示购物车中项目的Id项目。如果我将名称改为items1和items2，购物车将无法工作。因此，我认为我需要从侧边栏中删除tablet sizes中的origional items div，并将其添加到标题中，反之亦然？您可以。根据用户窗口大小，将其中一个添加到文档中。我在下面添加了代码，而不是显示和隐藏简单的附加。唯一的问题是id项目连接到这个由其他人编写的购物车。因此，他们的div必须有id项才能让购物车工作。啊，谢谢，这很有意义，我将尝试一下。不过items div最初位于侧边栏中。我有点不确定setInterval函数的作用是什么？为了简单起见，我已经删除了它，但本质上它会限制代码在调整窗口大小时启动itemstoheader函数数百次，降低到每100毫秒一次。