Могу ли я установить цвет текста при добавлении строк в пустой div?

Question

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

Мой код выглядит следующим образом :

var html = '';
for (i = 0; i < data.length; i++){
    html += (i+1) + ". " + data[i] + '<br/>';
}
$players.html(html);

Это все работает, но я хочу установить цвет каждой строки отдельно. Например, первая строка будет черной, вторая - красной, третья - синей и т. Д.

Answer 1

Вы можете сделать что-то вроде этого. Очевидно, вы можете изменить цвета и их порядок в любое время.

$( document ).ready(function() {
  var data = ['Bob','Smith','John','Jackson','Michael','Steve'];
  var colors = ['red','blue','green','orange'];
  var html = '';
  for (i = 0; i < data.length; i++){
    html += '<p style="color: '+ colors[i%colors.length] + ';">' + (i+1) + ". " + data[i] + '</p><br/>';
  }
  $('.players').html(html);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="players"></div>

Answer 2

Вам нужно будет обернуть каждую строку в другой тег, например ...

<p>string</p>

Затем вы можете установить либо атрибут класса, либо атрибут стиля для этого тега по отдельности. например. 3 предложенных варианта ...

<p class="line2">string</p>
<p class="red">string</p>
<p style="color:red">string</p>

Если линии должны быть последовательно окрашены, я бы лично использовал опцию "class", поскольку она позволяет вам устанавливать каждый стиль только один раз.

РЕДАКТИРОВАТЬ: Я только что понял, что вы также хотите знать, как сделать дискретные значения для каждой итерации внутри l oop. Для этого я сначала должен создать массив имен стилей или значений цвета, а затем применить их, используя ту же позицию индекса, что и для массива, через который вы проходите цикл. Чтобы избавить вас от необходимости определять массив цветов, который гарантированно будет иметь длину, равную длине массива вашего проигрывателя, вы можете l oop просмотреть тот же список цветов, используя оператор по модулю (остаток) "%", например ...

var colors = ["black", "red", "blue"];
var html = '';
for (i = 0; i < data.length; i++){
    html += "<p style='color:" + colors[i % 3] + "'>" + (i+1) + ". " + data[i] + '</p>';
}
$players.html(html);

Это позволит применить цвет [0] к строке 0, цвет [1] к строке 1, цвет [2] к строке 2, а затем перейти к цвету [0] для строки 3.

Чтобы избавить вас от необходимости изменять значение по модулю ("3") при каждом изменении списка цветов, дальнейшим улучшением будет замена colors[i % 3] на colors[i % colors.length].