在常规屏幕上自动调整后，Jquery不会在较小的屏幕上更改div的宽度

Question

根据子项数量自动调整子div的宽度的脚本。在较小的屏幕上我需要它们100％宽。我已经尝试将脚本直接插入脚本中，以调整常规屏幕上的宽度。不行。还尝试将其插入页面的最底部。也没用。

这是代码

$(".basecollections").each(function(){
var child_width = 100 / $(this).children().length;
    child_width = Math.floor(child_width);
$(this).children().css("width", child_width + "%");
     if ( screen.width < 1000 ) {
    $(this).children().css('width','100%');
  } 
})

http://jsfiddle.net/3x466nb1/

Answer 1

而不是screen.width您需要使用$(window).width()： DEMO

$(".basecollections").each(function(){
    var child_width = 100 / $(this).children().length;
    child_width = Math.floor(child_width);
    $(this).children().css("width", child_width + "%");
    if ( $(window).width() < 1000 ) {
        $(this).children().css('width','100%');
    } 
});

如果您希望更改是动态的，您需要在窗口元素的resize事件中编写这段代码：

$(window).resize(function(){
    $(".basecollections").each(function(){
        var child_width = 100 / $(this).children().length;
        child_width = Math.floor(child_width);
        $(this).children().css("width", child_width + "%");
        if ( $(window).width() < 1000 ) {
            $(this).children().css('width','100%');
        } 
    });
});