每個元素的寬度

Question

我找不到解決方案。 如何循環遍歷從寬度最大的元素開始的所有元素（本例中爲elname_03類的元素）。

我有幾個div元素具有相同的類名稱，我正在循環它們。

也許有一個選擇器來做到這一點？

<div class="el elname_01"></div> 
<div class="el elname_03"></div> 
<div class="el elname_02"></div> 
<div class="el elname_03"></div> 
<div class="el elname_02"></div> 
<div class="el elname_03"></div> 

• elname_01 - 寬100px的
• elname_02 - 寬150像素
• elname_03 - 寬200像素

我需要開始從elname_03檢查，畢竟他們通過循環通過，則我需要循環所有02號碼。我想用一個each來做到這一點，如果可能的話，因爲我從json解析數據。

Answer 1

您可以嘗試進行排序jQuery對象的數組，然後遍歷它：

​var items = $('div'); 
Array.prototype.sort​​​​​​​​​.call(items, function(a,b){ 
    return b.offsetWidth - a.offsetWidth; 
}); 

items.each(function() { 
    console.log(this); 
}); 

這裏的工作的jsfiddle：http://jsfiddle.net/7BzH4/

Answer 2

這是一個指導性答案。它可以得到改善。

但是這是基本的想法：

http://jsbin.com/aliqam/2/edit

<input class="a" style="width:10px";/> 
  <input class="b" style="width:100px";/> 
  <input class="c" style="width:40px";/> 

function SortBySize(a, b) 
{ 
    var aName = parseInt($(a).width()); 
    var bName = parseInt($(b).width()); 
    return((aName < bName) ? -1 : ((aName > bName) ? 1 : 0)); 
} 

讓測試：

前：

console.log($("input").eq(0).width()) 
console.log($("input ").eq(1).width()) 
console.log($("input").eq(2).width()) 

var gg = $("input").get().sort(SortBySize); 

後：

console.log($(gg).eq(0).width()) 
console.log($(gg).eq(1).width()) 
console.log($(gg).eq(2).width()) 

Answer 3

試試這個讓你與最大寬度的div：

var maxWidth = Math.max.apply(null, $('div.el').map(function() { 
    return $(this).outerWidth(true); 
}).get()); 

alert(maxWidth);​ 

DEMO：http://jsfiddle.net/UBdAS/