Сделать из кода for loop

Question

Подскажите как из кода в котором я меняю цвет текста в кнопке, сделать for-loop

$(".btn:odd").html("I am blue odd").css("color", "blue");
$(".btn:even").html("I am red even").css("color", "red");
$(".btn:odd").html("I am blue odd").css("color", "blue");
$(".btn:even").html("I am red even").css("color", "red");
$(".btn:odd").html("I am blue odd").css("color", "blue");
$(".btn:even").html("I am red even").css("color", "red");

Answer 1

Никакой loop не нужен.. код самодостаточен.

$(".btn:odd").html("I am blue odd").css("color", "blue");
$(".btn:even").html("I am red even").css("color", "red");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">10</button>
<button class="btn">11</button>
<button class="btn">12</button>
<button class="btn">13</button>
<button class="btn">14</button>

Единственное, управление стилями можно вынести в CSS, а не менять в коде

$(".btn:odd").html("I am blue odd").addClass("odd-elements");
$(".btn:even").html("I am red even").addClass("even-elements");

.even-elements {    
    color: red;
}


.odd-elements {
    color: blue;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>

<button class="btn">1</button>
<button class="btn">2</button>
<button class="btn">3</button>
<button class="btn">4</button>
<button class="btn">5</button>
<button class="btn">6</button>
<button class="btn">7</button>
<button class="btn">8</button>
<button class="btn">9</button>
<button class="btn">10</button>
<button class="btn">11</button>
<button class="btn">12</button>
<button class="btn">13</button>
<button class="btn">14</button>

На самом деле тут всё еще прозаичнее:

.btn:nth-child(odd):after {
    color: blue;
    content: 'I am blue odd';
}

.btn:nth-child(even):after {
    color: red;
    content: 'I am red even';
}

<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>
<button class="btn"></button>

Единственное тут проблема в понимании того что именно Jquery и CSS понимают под четным и нечётным элементом

БЛОГ НА HUSL

Сделать из кода for loop

Ответы (1 шт):