Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Как определить максимальное значение style width из нескольких повторяющихся div (https://javascript.ru/forum/project/69159-kak-opredelit-maksimalnoe-znachenie-style-width-iz-neskolkikh-povtoryayushhikhsya-div.html)

cartgen 02.06.2017 08:34
Как определить максимальное значение style width из нескольких повторяющихся div
 
Здравствуйте.
Ребята, помогите чайнику. В Javascript я нуль.
Нужно определить максимальное значение style width (ширины) из нескольких повторяющихся div с одинаковым классом "pdf".

Наваял такое: 

var count = document.getElementsByClassName('pdf').length;
var widths =[];
for (i = 0; i < count; ++i) {
  widths[i] = document.getElementsByClassName('pdf')[i].style.width.replace('px', ''); 
}
var maxWidth = Math.max.apply(null, widths);



Вроде работает. Проверьте, пожалуйста, правильно это или нет. Может как-то лучше можно?

ksa 02.06.2017 08:46
Цитата:
Сообщение от cartgen
Может как-то лучше можно?
Как минимум так

var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
  var val = o[i].style.width.replace('px', ''); 
  if (val>max) max=val;
}
alert(max);

Diphenyl Oxalate 02.06.2017 08:52
хм

<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
  var val = o[i].style.width.replace('px', ''); 
  if (val>max) max=val;
}
alert(max);

</script>

рони 02.06.2017 08:52
:-?
scrollWidth

ksa 02.06.2017 08:55
Цитата:
Сообщение от Diphenyl Oxalate
хм
Каюсь, не проверял... :D 

<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>
<script>
var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
	var val = o[i].style.width.replace('px', ''); 
	if (-val<-max) max=val;
};
alert(max);

рони 02.06.2017 08:57
ksa,
:-? 
<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
  var val = +o[i].style.width.replace('px', ''); 
  if (val>max) max=val;
}
alert(max);

</script>

ksa 02.06.2017 09:00
рони, обновленный вариант см.выше. :)

рони 02.06.2017 09:01
:write: :) 
<a href="/kv.php"></a>
<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=[].reduce.call(o,function(a,b) {
   return Math.max(a, b.scrollWidth)
},0);
alert(max);

</script>

рони 02.06.2017 09:07
Цитата:
Сообщение от ksa
вариант см.выше
Цитата:
Сообщение от ksa
if (-val<-max) max=val;
с этим вариантом в max строка, может один плюс лучше, чем два минуса, мало ли складывать потом с чем-то этот max.

ksa 02.06.2017 09:24
рони, просто хотел развеселить. :)

рони 02.06.2017 09:36
ksa,
:dance: :)

cartgen 04.06.2017 01:51
Спасибо большое!

Только какой вариант выбрать? :( 
<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
  var val = +o[i].style.width.replace('px', ''); 
  if (val>max) max=val;
}
alert(max);

</script>


Или 

<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=[].reduce.call(o,function(a,b) {
   return Math.max(a, b.scrollWidth)
},0);
alert(max);

</script>


Наверно там, где буковок меньше? :victory:

рони 04.06.2017 02:07
cartgen,
самый оптимальный скорее всего будет этот
<div class="pdf" style="width: 100px;"></div>
<div class="pdf" style="width: 200px;"></div>
<div class="pdf" style="width: 300px;"></div>
<div class="pdf" style="width: 400px;"></div>
<div class="pdf" style="width: 5px;"></div>

<script>
var o = document.getElementsByClassName('pdf');
var max=0;
for (var i = 0; i < o.length; ++i) {
  var val = o[i].scrollWidth;
  if (val>max) max=val;
}
alert(max);

</script>

laimas 04.06.2017 10:15
Цитата:
Сообщение от рони
самый оптимальный скорее всего будет этот
Если объектов много, можно в цикле по срезу половины первого массива проверять сразу два.

рони 04.06.2017 10:20
laimas,
а можно код?

laimas 04.06.2017 10:23
Типа такого:

var max = i = n = 0,
    a = document.getElementsByClassName("pdf"),
    b = [].slice.call(a, Math.floor(a.length/2)); 

for(; i < b.length; i++) (n = Math.max(a[i].scrollWidth, b[i].scrollWidth)) > max && (max = n);

рони 04.06.2017 10:28
laimas,
спасибо

laimas 04.06.2017 10:32
А можно просто обходить массив с двух сторон в цикле с итерацией Math.round(array.length/2). Но массивы хранятся в памяти в последовательных ячейках, а значит последовательный обход самый быстрый. В тоже время и ссылка на память с постоянным смешением -1 тоже по идее быстро будет.

В общем фиг его знает, надо тестировать. :)

destus 04.06.2017 12:06
Цитата:
Наверно там, где буковок меньше 
<div class="pdf" style="width: 100px;"></div>
  <div class="pdf" style="width: 200px;"></div>
  <div class="pdf" style="width: 300px;"></div>
  <div class="pdf" style="width: 400px;"></div>
  <div class="pdf" style="width: 5px;"></div>
  <script>
const max = Math.max(...Array.from(document.querySelectorAll('.pdf'), el => el.scrollWidth));
alert(max);
  </script>


Часовой пояс GMT +3, время: 10:59.