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 - width 100px
elname_02 - width 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);

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

每个元素按宽度

3 个答案: