How do I get the highest "left" value of a group of elements with jquery?

Question

I need to get the highest left value of a set of elements which all have a left value as they are set with position absolute. I need to retrieve the element with the highest left value so after I can add specific classes to this element.

window.load(function()
{
    $('.elements').each(function() 
    {
        var leftValue = $(this).offset().left;
    });
});

Answer 1

All answers forget one thing: he asks about the element of highest left value, not the max value among elements.

So:

window.load(function()
{
    var max = 0, $element;
    $('.elements').each(function()
    {
        if($(this).offset().left > max)
        {
            max = $(this).offset().left;
            $element = $(this);
        }
    }
}

At the end, $element will have the element with highest left value

Answer 2

You could add them to an array and then use Math.max to grab the largest number.

var arr = [], max = 0, $elements = $('.elements');

$elements.each(function() {
  arr.push($(this).offset().left);
});

max = Math.max.apply(null, arr);

And then use $.grep to grab the relevant element.

var element = $.grep($elements, function (e) {
  return $(e).offset().left === max;
});

Demo

Answer 3

You can run this inside window.load or wherever you need it:

var max = $('.elements').toArray().reduce(function(max, elem) {
    return Math.max(max, $(elem).offset().left || 0);
}, Number.NEGATIVE_INFINITY);

Although you could use 0 in that last line instead of Number.NEGATIVE_INFINITY, this way you can also account for possible negative values.

Example on JSFiddle.

---

Update

As @Eagle points out, this, like many answers, missed that the OP wanted the element, not the actual size. An updated JSFiddle shows a modification of the technique to give that instead.

var maxElem = $('.elements').toArray().reduce(function(curr, elem) {
    var left = $(elem).offset().left;
    return left > curr.val ? {elem: elem, val: left} : curr 
}, {elem: null, val: Number.NEGATIVE_INFINITY}).elem;

Answer 4

window.load(function(){

        var max = 0;
        $('.elements').each(function() {
            var leftValue = $(this).offset().left;
            if ( leftValue > max ) 
            {
               max = leftValue;
            }
        });

    });

The max variable is the highest.

Answer 5

There's no max built-in function that I'm aware of, but you could

window.load(function(){
    var maxLeft = 0;

    $('.elements').each(function() {
        var leftValue = $(this).offset().left;
        if (leftValue > maxLeft) {
            maxLeft = leftValue;
        }
    });

    console.log(maxLeft);
});

Answer 6

What you need to do is keep a variable outside of the scope of the each. Then you simply compare your value to all the others that you find and assign the highest as you go.

window.load(function()
{
    var leftValue = 0;
    $('.elements').each(function() 
    {
        maxLeft = $(this).offset().left;
        if (maxLeft > leftValue) 
        {
            leftValue = maxLeft;
        }
    });
});

Answer 7

Here an alternative using recursivity : http://jsfiddle.net/wared/Y762p/. Notice that you can now resize the demo panel without relaunching the fiddle.

var els = $('.elements').get();
var $el = mostLeft(els);

function mostLeft(list) {    
    var biggestLeft; // saves "left" to reduce calls to .offset()
    return function rec(list) {
        var sel, $el, left; // "sel" means "selection"
        if (list.length) {
            $el = $(list[0]);
            left = $el.offset().left;
            sel = rec(list.slice(1));
            if (!sel || left > biggestLeft) {
                biggestLeft = left;
                sel = $el;
            } 
            return sel;
        }
    }(list);    
};

Changes comparing to previous version :

• the original elements list is not modified anymore, so, it's reusable,
• removed the sel parameter to prevent wrong usage and bugs.