Question

我在6＆amp;之后使用此代码添加div根据屏幕尺寸顺序排列4个项目。它在加载时工作正常，但它不适用于浏览器调整大小。

$(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>');
    }
})
})

<小时/> 的更新

感谢所有回答。但是，根据想要的情况，它不能完美地工作。当我改变超过1次屏幕时，每次调用（添加超过1个div）。

看起来像这样：

如果，设备宽度大于1024.那么，Counter将计算6（在6项后添加clearfix div）。＆安培;如果设备宽度小于1024那么。计数器将计算4（在4项后添加clearfix div）。

如果设备宽度为＆gt; 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>

如果设备宽度<＆lt;

1024

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

我希望，你能清楚地理解我的问题。感谢。

Answer 1

要检查用户何时调整浏览器大小，请使用$.resize，如下所示：

$( 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>');
    } 
});

注意：请考虑width == 1024将会发生什么。

Answer 2

尝试使用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>');
    }
});

要手动触发此操作，请执行以下操作：

$(function() { $(window).resize() }); // trigger resize onload

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

浏览器调整大小时实时更改

2 个答案: