在常规屏幕上自动调整后，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%');
    } 
});

同样，如果您希望更改是动态的，则需要在window元素的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%');
        } 
    });
});