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;
}

它仅调用我帖子的所有直接子节点，它们已经与移动设备上的窗口大小相同，并设置规则max-width以防止离开屏幕。完善！

感谢您的帮助！

Answer 1

首先，您可能希望开始使用循环来遍历变量内部的所有div＆＃34; div＆＃34;也不要试图立即追求宽度陈述，但得到所有的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);

Answer 2

溢出的问题并非来自此。实际上，它来自div类 linkwithin_inner ，其中宽度已设置为固定宽度680px！important。

您应该在该页面上找到的CSS中将宽度更改为100％。

.linkwithin_inner {
width: 100% !important;
}

问题将解决。

Answer 3

试

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

   if ( $(this).width() > win ) {
      $(this).css('max-width', win );  
   }

});

Answer 4

您需要过滤掉比窗口宽的div，然后将最大宽度设置为仅限于那些，如下所示。

var winWidth = $(window).width();

$(".post div").filter(function(){
    return $(this).width() > winWidth
}).css({"max-width": winWidth + "px"});

她的a demo along行是{{3}}

Answer 5

基本上你想循环通过这个`$（＆＃34; .post div＆＃34;）＆＃39;

找到的所有div

归结为：

$(".post div").each(function () {
    $(this).width("50px");
});

在这里你有一个工作小提琴： https://jsfiddle.net/gkLmx6d1/2/

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

5 个答案: