Как пронумировать елементы таким образом?

Question

[Masonry]

Всем привет, есть код здесь в цикле каждому элементу добавляется свой data-index. Как мне реализовать следующие, чтобы на каждой новой строке отчет индекса начинался с нуля, то есть первая строка идет индекс от 0 до 9 переходит на следующую строку и опять добавляет ячейкам индекс от 0 до 9 и так всем ячейкам. Чтобы каждая новая строка начинала отсчет с нуля.

Answer 1

[Артем]

for (i = 0,c = 0; i < chooseCell.length; i++) {
	if(c%10 == 0) c = 0;
	chooseCell[i].setAttribute('data-index', c);
	chooseCell[i].addEventListener('click', coordCell);
	c++;
}

Comments

[Oleksandr Fedorov]

chooseCell[i].setAttribute('data-index', i % 10);
и переменная c не нужна

[Masonry]

Можете еще кое в чем подсказать, задача вообще такая к примеру я кликнул на ячейку в центре и надо показать координаты этой ячейки по x и по y.

[Masonry]

Oleksandr Fedorov: можете помочь ? комментарий мой с верху.

[Артем]

Oleksandr Fedorov: действительно!

var coordCell = function(e) {
var indexCell = this.getAttribute('data-index'),
indexRow = this.getAttribute('data-row');
position = {x: 0, y: 0},
total = widthSegments*heightSegments;

outputValue.innerHTML = 'Индекс ячейки: ' + indexCell +':' + indexRow;

};

for (i = 0; i < chooseCell.length; i++) {
chooseCell[i].setAttribute('data-index', i % 10)
chooseCell[i].setAttribute('data-row', Math.round(i / 10, 1));
chooseCell[i].addEventListener('click', coordCell);
}

[Masonry]

Артем: спасибо !

[Masonry]

Артем: можете сказать что это выражение делает Math.round(i / 10, 1) ?

[Oleksandr Fedorov]

Masonry: вычисляет номер строки, но мой опыт показывает, что там должно быть Math.ceil

[Masonry]

Oleksandr Fedorov: а как мне теперь сделать следующие, чтобы отчет с 1 начинался, я то понимаю что можно в цикле просто переменной поставить вместо нуля 1 но тогда первый елемент i не будет работать https://jsfiddle.net/pazpqvue/3/

[Oleksandr Fedorov]

Masonry: если нужна какая-то поправка, то я думаю ее лучше здесь сделать:
outputValue.innerHTML = 'Индекс ячейки: ' + (indexCell + 1) +':' + (indexRow + 1);

[Артем]

Masonry: да, давайте лучше округлять в меньшую, и второй параметр ни к чему:
Math.floor(i / 10)

[Masonry]

Артем: вот смотрите https://jsfiddle.net/Ljqof7jy/ есть код, только он тут не совсем правильно отображает, на первой строке сначало по y показывает 0 потом показывает один, самая последняя ячейка вообще не работает, как быть ?

[Артем]

Masonry:
проблему с последней ячейкой исправил:
hello-site.ru/share/morskoj-boj
отсчет от 1 до 10 сделайте самостоятельно

[Masonry]

Артем: спасибо, теперь надо додумать мне как отсчет сделать...

[Артем]

Masonry: почему не хотите делать +1?

[Masonry]

Артем: вместо чего его делать ?

[Артем]

или так:
chooseCell[i].setAttribute('data-index', parseInt(i % 10) + 1 );
chooseCell[i].setAttribute('data-row', parseInt(Math.floor(i / 10)) + 1 );
или так:
outputValue.innerHTML = 'x:' + parseInt(indexCell + 1) + ' y: ' + parseInt(indexRow + 1);