Javascript 实时更改浏览器大小

我已经使用此代码根据屏幕大小在6和4项之后按顺序添加div。它在加载时工作正常，但在调整浏览器大小时不起作用

$(document).ready(function () {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    }
});

$(function () {
    $screensize = $(window).width();
    if ($screensize < 1025) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
})
})

$（文档）.ready（函数（）{
$screensize=$（window.width（）；
如果（$screensize>1024）{
$（'#menu.nav>li.categories\u hor>div>。列：第n个子项（6n）'）。在（''）之后；
}
});
$（函数（）{
$screensize=$（window.width（）；
如果（$screensize<1025）{
$（'#menu.nav>li.categories\u hor>div>.column:nth child（4n）'）。在（''）之后；
}
})
})

---

更新：

谢谢你的回答。但是，它不是完美的工作，根据我想要的。当我改变了超过1倍的屏幕大小，所以，它是每次调用（添加超过1个div）

看起来是这样的：

如果是，则设备宽度大于1024。因此，计数器将计算6（在6项之后添加clearfix div）如果设备宽度小于1024，则为。计数器将计算4（在4项之后添加clearfix div）

如果设备宽度大于1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

如果设备宽度小于1024

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="clearfix"></div>
    <div class="item"></div>
    <div class="item"></div>

---

我希望你能明白我的问题。谢谢。

要检查用户何时调整浏览器使用的大小，请执行以下操作：

$( window ).resize(function() {
    $screensize = $(window).width();
    if ($screensize > 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } 
    if ($screensize < 1024) {
        $(".clearfix.visible-lg-block").remove();
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    } 
});

$（窗口）。调整大小（函数（）{
$screensize=$（window.width（）；
如果（$screensize>1024）{
$（“.clearfix.visible lg block”）.remove（）；
$（'#menu.nav>li.categories\u hor>div>。列：第n个子项（6n）'）。在（''）之后；
} 
如果（$screensize<1024）{
$（“.clearfix.visible lg block”）.remove（）；
$（'#menu.nav>li.categories\u hor>div>.column:nth child（4n）'）。在（''）之后；
} 
});

---

注意：请考虑如果

width==1024

会发生什么情况。

尝试使用

resize

事件，并在处理程序中使用条件语句来操作DOM：

$(window).resize(function () {
    if ($(this).width() > 1024) {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(6n)').after('<div class="clearfix visible-lg-block"></div>');
    } else {
        $('#menu .nav > li.categories_hor > div > .column:nth-child(4n)').after('<div class="clearfix visible-lg-block visible-md-block"></div>');
    }
});

---

请注意，您可能希望更改DOM manip逻辑以使用CSS切换类和可见性，因为现在您将在调整大小时添加多个元素。

使用

窗口。调整大小
事件并如上所述进行设置。这是你第一次写这篇文章，因为我已经更新了我们的问题。我希望你现在能明白我的问题。谢谢。我已经更新了我们的问题。我希望你现在能明白我的问题。谢谢。嗨，我有一个问题。当第一次加载到
<1024
和
>1024
中时。因此，它不起作用。有解决办法吗？这是改变设备屏幕大小的工作。谢谢。哦，你需要把它放在
文档里面。准备好了
，但在
$（窗口）之外。调整大小。。事实上，我认为你可以使用上面的代码，正如你所说，它在加载时工作得很好。谢谢，我和你的两个代码都可以使用。所以它是工作的。任何可能都有两个代码对一个代码的短代码。