CODEWITHSUNDEEP
javascriptjquerycss
user782104
user782104

Reputation: 13555

Get the min width of the same class elements in jquery /css / javascript

<img class = "draggable moveable" id = "1" style="width:20px;" >...</img>
<img class = "draggable printable" id = "2" style="width:50px;" >...</img>
<img class = "draggable moveable" id = "3" style="width:10px;" >...</img>

For the case above, how to implement the jquery/css selector to get the minimum width of the same class?(which is 10px in this case)

$('.draggable').('min:width');

are there such synatx? thanks

Upvotes: 1

Views: 2267

Answers (2)

Ram
Ram

Reputation: 144709

There is no such syntax, you can sort the element according to their width and use first method: 

$('.draggable').sort(function(a, b){
   return $(a).width() > $(b).width(); 
}).first();

http://jsbin.com/igovaw/1/edit

Note that img element doesn't have closing tag.

If you want to get the minimum width and not the element you can use map method:

var w = $('.draggable').map(function(){
   return $(this).width(); 
}).get();

var min = Math.min.apply(null, w);

Upvotes: 2

Barmar
Barmar

Reputation: 781804

var minwidth = undefined;
$('.draggable').each(function () {
    width = parseInt($(this).css('width'));
    if (minwidth === undefined || width < minwidth) {
        minwidth = width;
    }
});

Upvotes: 2

Related Questions