Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jQuery get max width of child div's

I need to get the max width(just the one width) of the child div in the wrapper div element

<div id="wrapper">       <div class="image"><img src="images/1.jpg"></div>      <div class="image"><img src="images/2.jpg"></div>       <div class="image"><img src="images/3.jpg"></div>       <div class="image"><img src="images/4.jpg"></div>       <div class="image"><img src="images/5.jpg"></div>       <div class="image"><img src="images/6.jpg"></div>  </div> 
like image 482
ONYX Avatar asked Apr 25 '11 23:04

ONYX


People also ask

How to get max width in JS?

The maxWidth property sets or returns the maximum width of an element. The maxWidth property has effect only on block-level elements or on elements with absolute or fixed position. Note: The width of an element can never be greater than the value specified by the maxWidth property.

How do I set the width of an element in jQuery?

jQuery width() Method The width() method sets or returns the width of the selected elements. When this method is used to return width, it returns the width of the FIRST matched element. When this method is used to set width, it sets the width of ALL matched elements.

How do I make divs always fit in my parent DIV?

Method 1: First method is to simply assign 100% width and 100% height to the child div so that it will take all available space of the parent div. Consider this HTML for demonstration: HTML.


1 Answers

Math.max.apply(Math, $('.image').map(function(){ return $(this).width(); }).get()); 

Per suggestion, I'll break that down:

$('.image').map(function(){    return $(this).width(); }).get(); 

The above gets a list of all .image divs and converts it into a list of their widths. So you'll now have something like: [200, 300, 250, 100, 400]. The .get(), as Felix pointed out, is necessary to get an actual Array instead of a jQuery array.

Math.max takes N arguments, so you have to call it as: Math.max(200, 300, 250, 100, 400), which is what the Math.max.apply piece accomplishes.

like image 128
Nobody Avatar answered Sep 22 '22 04:09

Nobody