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>
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.
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.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With