检查所有div宽度并调整大小，使其大于窗口

Question

I have a blog with new responsive template. I want to check all divs inside the posts to get any that has width bigger than window size and change the width of ONLY those divs to have max-width: windowsize.

Truth is the blog has 350+ posts and I don't have time to edit every single post to remove the ones with divs with fixed width going offscreen.

I'm not very good with jQuery and js, but I got this code and got this far:

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

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

But it's changing the size of ALL divs. Any ideas?

---

[SOLUTION - for my needs, anyway]

As much as all your jQuery codes were amazing, I couldn't get any of them to work on the divs I wanted (but I'm sure they'll help people seeing this post in the future), so I just went for basic CSS and it fits my needs. I was afraid of ruling ALL DIVS inside posts width:100% because it would affect the nested ones, so I just used:

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

It calls ONLY all direct children of my post, which is already the same size of the window on mobile, and sets the rule max-width to prevent going off the screen. Perfect!

Thank you for your help!

Answer 1

first of all you might want to start using a loop to go through all the divs thats being inside the variable "div" also dont try to immediately go after the width statement but get all the divs

so your code:

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

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

should become something like this:

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

also if you want to find out what exactly div is use this code:

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

Answer 2

The problem of overflow does not come from this. In fact, it comes from the div class linkwithin_inner where the width has been set to a fixed width of 680px !important.

You should change the width to 100% in the CSS found on that page.

.linkwithin_inner {
width: 100% !important;
}

and the problem will be solved out.

Answer 3

try

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

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

});

Answer 4

You'd need to filter out the divs that are wider than the window and then set max width to only those, like below.

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

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

Hers is a demo along the same lines

Answer 5

Basically you want to loop though all divs which are found by this `$(".post div")'

Which boils down to:

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

And here you have a working fiddle: https://jsfiddle.net/gkLmx6d1/2/