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

Question

I have using this code for add div after 6 & 4 item in sequence according to screensize. It is working fine on load, but it does not work on browser resize.

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

---

Updated:

Thanks for all answer. but, it is not work perfectly according to want I. When, I have change more than 1 time screensize so, it is every time call(add more than 1 div).

It would look like this:

if, device width is more than 1024. So, Counter will calculate 6(add clearfix div after 6 item). & if device width is less than 1024 So. Counter will calculate 4(add clearfix div after 4 item).

if device width is > 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> 

if device width is < 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> 

I hope, you can clearly understand my question. Thanks.

Answer 1

To check when the user resize the browser use $.resize , like this:

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

NOTE: please conside if the width == 1024 what will happen.

Answer 2

Try using the resize event and use conditional statements inside the handler to manipulate your 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>');
    }
});

To trigger this manually onload, do:

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

Note that you might want to change your DOM manip logic to toggle classes and visibility using CSS instead, as it is now you will be adding multiple elements on resize.