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;
});
});
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
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;
});
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 .
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;
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.
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);
});
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;
}
});
});
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 :
sel
parameter to prevent wrong usage and bugs.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.