Блог

Главная - Вопросы по программированию - Создайте бесконечный цикл внутри .each()

Создайте бесконечный цикл внутри .each()

#javascript #jquery

#javascript #jquery

Вопрос:

Я пытаюсь придать каждому элементу списка другой цвет. Однако у меня есть только 2 цвета, но 10 постоянных ссылок.

Моя проблема:

Я хочу, чтобы цвета повторялись снова, пока есть постоянные ссылки.

   var colors = ['#ff9f9d', '#EB1B53'];

  $('a.permalink').each(function(i) {
      $(this).css('color', colors[i]);
      console.log($(this));
  });

Каков наилучший способ убедиться, что он снова запускает массив цветов, если он достигает конца?

Ответ №1:

Попробуйте использовать оператор модуля, чтобы получить напоминание, например

 var colors = ['#ff9f9d', '#EB1B53'];

$('a.permalink').each(function (i) {
    $(this).css('color', colors[i % colors.length]);
    console.log($(this));
});

это может быть сокращено как

 $('a.permalink').css('color', function (i) {
    return colors[i % colors.length];
});

Демонстрация: скрипка

Ответ №2:

Попробуйте использовать простую modulo математику здесь,

 $('a.permalink').each(function(i) {
      $(this).css('color', colors[i%2]);
      console.log($(this));
});

Комментарии:

1. если у меня в массиве более 2 значений, что я могу сделать? так что это будет отрицательное голосование — балла

2. Отрицательный голос здесь не имеет значения.. Я удовлетворен тем, что я только что нашел решение для этого вопроса менее чем за полсекунды. Для меня этого достаточно …! 🙂

3. вы должны писать более динамично, например, как @arun — bala

4. я не удовлетворен вашим ответом. итак, я ставлю отрицательный голос за вас, дорогой — бала

5. Спасибо. 1. Я буду использовать .length , но это было полезно. 🙂

Ответ №3:

Я думаю, не самый производительный, но вы поняли идею:

 var colors = ['#ff9f9d', '#EB1B53'];


$('a.permalink').each(function() {
    $(this).css('color', colors.reverse()[1]);
    console.log($(this));
});