Программирование и библиотеки.

Многомерные массивы в JavaScript

Александр » 07 окт 2015, 00:54

Недавно, верстая один сайт, мне понадобилось для выравнивания высоты блоков в каждом ряду по самому высокому блоку в ряду, набросать какой-нибудь несложный JavaScript, т. к. через html/css эту задачу представлялось решить нереально без сильного усложнения html-кода, при чём в таком случае светила возможность проблем с кроссбраузерностью.
Немного поразмыслив, я решил, что алгоритм должен выглядеть так:
Есть множество блоков, т. е. множество с числом элементов n. Есть параметр "число колонок" m. Нужно сделать функцию, которая принимает в качестве аргумента одномерный массив dom-элементов размерностью m (говоря проще, один ряд) и делает высоту их всех равной большему из ряда.
А для начала нужно преобразовать имеющееся множество блоков в двумерный массив размерностью (n/m)x(m) с тем чтобы культурно в цикле передать строки этого массива в вышеописанную функцию.
С использованием Jquery это выглядело примерно так:
Код: Выделить всё
$(document).ready(function() {
var cols=4; // число колонок
var itemsArray = $("div.itemContainer"); // находим все блоки
var itArrLength = itemsArray.length;
var newItemsArray = [];
  for (var i=0; i<=itArrLength/cols; i++){
    for (var j=0; j<cols; j++){
      if(i*cols+j<itArrLength){
      newItemsArray[i][] = itemsArray[i*cols+j];
      }
    }
  };
$.each(newItemsArray,function(index,subItemsArray){setEqualHeight(subItemsArray);}); // передаем строки в функцию выравнивания по высоте
});

Но вместо dom-элементов, в subItemsArray просто ничего не было. Оказывается я давно не работал с многомерными массивами в JavaScript и синтаксис создания и автозаполнения в стиле PHP здесь не прокатит.
В JavaScript, если мы хотим создать многомерный массив нужно каждый раз явно указывать что данный элемент массива в свою очередь тоже является массивом.
Самый простой пример:
Код: Выделить всё
var n = 3, m = 3;
var mas = [];
for (var i = 0; i < m; i++){
    mas[i] = [];
    for (var j = 0; j < n; j++){
        mas[i][j] = 0;
}}
console.log(mas);

Кстати, лучше даже не использовать оператор new Array, а использовать скобочный оператор [].
Так, что мой код на Jquery в правильном виде стал таким:
Код: Выделить всё
$(document).ready(function() {
var cols=4; // число колонок
var itemsArray = $("div.itemContainer"); // находим все блоки
var itArrLength = itemsArray.length;
var newItemsArray = [];
  for (var i=0; i<=itArrLength/cols; i++){
    newItemsArray[i]=[];
      for (var j=0; j<cols; j++){
        if(i*cols+j<itArrLength){
          newItemsArray[i][j] = itemsArray[i*cols+j];
        }
      }
  };
$.each(newItemsArray,function(index,subItemsArray){setEqualHeight(subItemsArray);}); // передаем строки в функцию выравнивания по высоте
});
Александр
 
Сообщения: 239
Зарегистрирован: 20 мар 2014, 17:05

Re: Многомерные массивы в JavaScript

IUA » 10 окт 2015, 18:15

выравнивания высоты блоков в каждом ряду по самому высокому блоку в ряду

А в примере нет этой функции, у меня похожая задача: сделать блоки одинаковой высоты. HTML городить не хочется, у всех нормальных пользователей JavaScript всё-равно в браузере всегда включен. А у тех, у кого не включен, они привыкли сайт через html-код наверное читать ))
IUA
 
Сообщения: 6
Зарегистрирован: 09 июл 2015, 09:35

Re: Многомерные массивы в JavaScript

Александр » 10 окт 2015, 19:00

Напишу чуть попозже, пока времени совсем нет ((
Александр
 
Сообщения: 239
Зарегистрирован: 20 мар 2014, 17:05


Вернуться в JavaScript