добавить х номер каждого 10-го элемента

Question

Я хочу добавить номер каждого 10-го элемента.

Например,

function myFunction() {

    for (var i = 1; i <= 100; i++)
    { 

        var d = i;
        document.getElementById("demo").innerHTML += d+"<br/>";

    }

}

Вывод:

1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51,52,53,54,55,56,57,58,59,60,61,62,63,64,65,66,67,68,69,70,71,72,73,74,75,76,77,78,79,80,81,82,83,84,85,86,87,88,89,90,91,92,93,94,95,96,97,98,99,100

Но,Я хочу вот так

1,2,3,4,5,6,7,8,9,10,16,17,18,19,20,21,22,23,24, 25,31,32,33,34,35,36,37,38,39,40 ....

Я хочу добавить 5 после 10 числа, добавить 10 после 20 числа,добавить 15 после 30 числа, добавить 20 после 40 числа, добавить 25 после 50 числа.Я знаю, что это просто.Но я не смог получить никакого результата.

JsFiddle

Answer 1

Я использовал счетчик для учета приращения по 10-му элементу, и просто помещаю результаты в консоль.Очевидно, есть некоторые, которые просто добавят 5, опция счетчика - это просто предпочтение дизайна.

var arr = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21];
function myFunction(arr){
  var counter = 0;
  for(var i = 0; i<arr.length; i++){
    if (i%10 ==0){
      counter++;
    }
    arr[i] = arr[i]+(5*(counter-1));
  }
  console.log(arr);
};

myFunction(arr);

Answer 2

Рассказ о проблеме производительности, представленной Ником Парсонсом

var resultStr = ""
  for (var i = 1; i <= 100; i++) {
    resultStr += i + "<br/>";
    if (i % 10 === 0) {
      i += 5;
    }
  }

  document.getElementById("demo").innerHTML += resultStr;

innerHTML просто ужасно медленен.
Рассмотрим следующий код, который использует фрагмент документа и метод vanilla .append ()

const fragment = document.createDocumentFragment();
for (var i = 1; i <= 100; i++)
    {
        if( i % 10 === 0 )
            i += 5;
        fragment.append( document.createTextNode( i ) );
        fragment.append( document.createElement('BR') );
    }
document.getElementById('demo').append( fragment );

Из моего теста использование в 2000 (!) Раз быстреефрагмент документа.

Answer 3

сделать что-то вроде:

function myFunction() {

    for (var i = 1; i <= 100; i++)
    { 
        var j=Math.floor(i/10);
        var x=5*j;
        var d = x+i;
        document.getElementById("demo").innerHTML += d+"<br/>";

    }

}

Answer 4

Измените свою функцию следующим образом:

function myFunction() {

  for (var i = 1; i <= 100; i++) {
        var d = i;
    if (i > 1 && i % 10 === 1) {
            d = (i % 10) * 5 + i;
    }
    document.getElementById("demo").innerHTML += d + ",";
  }
}

Answer 5

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

var i,
    offset = 0,
    result = [];
    
for (i = 1; i <= 100; i++) {
    result.push(i + offset);
    if (i % 10 === 0) offset += 5;
}
console.log(result.join(' '));

Answer 6

Вы можете использовать оператор по модулю %, чтобы проверить, является ли текущее число (i) кратным 10, а затем, если это так, добавить 5 к i:

if (i % 10 === 0) {
  i += 5;
}

Более того, я рекомендую вам сохранить строку всех чисел, которые вы хотите добавить на свою страницу, поскольку запросы и добавление содержимого в DOM для каждой итерации цикла - это дорогостоящая операция, которую можно избежать

См. Пример ниже:

function myFunction() {
  var resultStr = ""
  for (var i = 1; i <= 100; i++) {
    resultStr += i + "<br/>";
    if (i % 10 === 0) {
      i += 5;
    }
  }
  
  document.getElementById("demo").innerHTML += resultStr;
}

myFunction();

<div id="demo"></div>