jQuery. Логика создания колоды карт через вложенные циклы

Question

Пытаюсь создать колоду карт с использованием jQuery. Суть метода в прохождении массива доступных карт и мастер по цвету. Вставляется колода, но все они СИНИЕ. Почему так?

    cards = ['2', '3', '4', '5', '6', '7', '8', '9', '10', 'J', 'Q', 'K', 'A']
    suits = ['black', 'red', 'green', 'blue']
    $(function gf() {
        for(i = 0; i < 13; i++) {
            for(j = 0; j < 4; j++) {
                $('.deck').append(cards[i]).css('color', suits[j])
            }
        }
    })

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

Answer 1

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

$(collection).append(el1).append(el2).append(el3);

Поэтому в строке

$('.deck').append(cards[i]).css('color', suits[j])

Цвет добавляется контейнеру .deck

Если цвет нужен отдельной карте, ее нужно обернуть в элемент, например span

cards = ['2','3','4','5','6','7','8','9','10','J','Q','K','A']
    suits = ['black','red','green','blue']
    $(function gf(){
        for(i=0;i<13;i++){
            for(j=0;j<4;j++){
                $(`<span>${cards[i]}</span>`).css('color', suits[j]).appendTo($('.deck'));
            }
        }
    })

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

БЛОГ НА HUSL

jQuery. Логика создания колоды карт через вложенные циклы

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