Как вытащить данные из массива отвечающий определенному критерию?

Question

[Александр Янк]

Есть такой блок:

<div class="lang-area">
    <ul class="lang list-unstyled">
        <li class="lang-item lang-item__active"><a href="#" class="rus">Россия</a></li>
        <li class="lang-item"><a href="#" class="en">Britain</a></li>
        <li class="lang-item"><a href="#" class="deu">Deutschland</a></li>
        <li class="lang-item"><a href="#" class="fr">France</a></li>
        <li class="lang-item"><a href="#" class="es">España</a></li>
    </ul>
</div>

Пытаюсь вытащить ширину самого длинного элемента с классом lang-item и присвоить родителю lang-area:

var langItemWidth = $('.lang-item').width();
$(".lang-area").width(langItemWidth);

Понятное дело, что берется первый результат с классом lang-item, пытаюсь массивом пробовать:

$(function() {
  $(".lang-item").each(function(index, element) {
    console.log(
      "Индекс элемента lang-item: " + index + "; ширина элемента = " + $(element).width()
    );
  });
});

Однако, я не понимаю, как из этого цикла вытащить результат с самой длинной шириной, подскажите пожалуйста.

Вот ссылка на инструмент где я пытаюсь провести манипуляции https://codepen.io/alex-lenk/pen/YvgozV

Answer 1

[Владимир]

https://developer.mozilla.org/ru/docs/Web/JavaScri...

$(function() {
  let length = Array.reduce($('.lang-item a'), (result, item) => {
    return Math.max(result, $(item).width())
  }, 0);
  console.log(length);
});

Comments

[Александр Янк]

В консоле ошибка:

common.js:20 Uncaught TypeError: Array.reduce is not a function
    at i (jquery.min.js:2)
    at Object.fireWith [as resolveWith] (jquery.min.js:2)
    at Function.ready (jquery.min.js:2)
    at HTMLDocument.J (jquery.min.js:2

Подскажите, с чем может быть связана?

[Владимир]

Alex Lenk, В чем запускаете?
Все современніе браузеры знают что такое Array.reduce
https://caniuse.com/#feat=es5

[Ihor Bratukh]

Владимир, забыли prototype и call Array.prototype.reduce.call()

[Ihor Bratukh]

Alex Lenk,

var maxWidth = Array.prototype.reduce.call($('.lang-item a'), function(result, item) {
	return Math.max(result, item.offsetWidth);
}, 0);

[Александр Янк]

Владимир, спасибо, ваш ответ дополнил BRAGA96, итого:

$(function() {
        let length = Array.prototype.reduce.call($('.lang-item'), (result, item) => {
            return Math.max(result, $(item).width())
        }, 0);
        console.log(length);
    });

работает!

[Ihor Bratukh]

Alex Lenk, лучше item.offsetWidth чем $(item).width(). Оборачивать элемент в jQuery обертку и дергать метод дольше, чем взять ширину через нативный dom api.

[Владимир]

BRAGA96, Такие задачи можно вообще без jQuery решать
Кстати https://jsfiddle.net/2dfowhb1/1/ прекрасно работает в ФФ, а вот в хроме уже нет

Answer 2

[Ihor Bratukh]

Как вариант

var $item = $('a', $('.lang-item'));
var maxWidth = Math.max.apply(null, $.makeArray($item).map(function(item) {
	return item.offsetWidth;
}));
console.log(maxWidth);

Или так:

const $item = $('a', $('.lang-item'));
const maxWidth = Math.max(...Array.from($item).map((item) => item.offsetWidth));
console.log(maxWidth);

Answer 3

[Петр Васильев]

Var mxw =0;

Внутри цикла:
If ($(element).width() >mxw){mxw = $(element).width() }