javascript - 检查所有 div 宽度并调整大于窗口的大小

Question

我有一个blog使用新的响应式模板。我想检查帖子内的所有 div，以获取宽度大于窗口大小的任何 div，并仅更改这些 div 的宽度以具有 max-width: windowsize。

事实是，该博客有 350 多篇帖子，我没有时间编辑每一篇帖子来删除那些固定宽度的 div 超出屏幕的帖子。

我不太擅长 jQuery 和 js，但我得到了 this代码并到目前为止:

var div = $(".post div").width();
var win = $(window).width();

if (div > win ) {
    $(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');  
}

但是它改变了所有 div 的大小。有什么想法吗？

<小时/>

[解决方案 - 无论如何，满足我的需要]

尽管你所有的 jQuery 代码都很棒，但我无法让它们在我想要的 div 上工作(但我确信它们会帮助人们将来看到这篇文章)，所以我只是选择了基本的 CSS，它符合我的需求。我害怕统治帖子宽度内的所有DIVS:100％，因为它会影响嵌套的，所以我只是使用:

.post-body > * {
max-width:100% !important;
}

它仅调用我的帖子的所有直接子级，这些子级已经与移动设备上的窗口大小相同，并设置规则最大宽度以防止超出屏幕。完美的!

感谢您的帮助!

Answer 1

首先，您可能想开始使用循环来遍历变量“div”内的所有 div，也不要尝试立即执行宽度语句，而是获取所有 div

所以你的代码:

var div = $(".post div").width();
var win = $(window).width();

if (div > win ) {
    $(" ONLY THE DIV THATS BIGGER? ").css('max-width', ' WINDOW-WIDTH? ');  
}

应该变成这样:

var div = $(".post div");
var win = $(window).width();

for(var i=0; i<div.length;i++){
    if(div[i].width() > win){
        $(div[i]).css('max-width','WINDOW-WIDTH?');
    }
}

如果您想了解 div 到底是什么，请使用以下代码:

var div=$(".post div");
console.log(div);