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