jquery - 每个元素按宽度

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 - 宽度 150px
• elname_03 - 宽度 200px

我需要从 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);​ 

演示：http: //jsfiddle.net/UBdAS/