JSFiddle - React, Tailwind, and code Playground

by oroce

HTML

[{<br />
<span class="card-holder">&nbsp;&nbsp;&nbsp;&nbsp;"<span class="name-label">name</span>":&nbsp;"<span class="name-value">52 Card</span>",<br />
    &nbsp;&nbsp;&nbsp;&nbsp;"<span class="suits-label">suits</span>":&nbsp;{<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="suit-item">"<span class="suit-elem-label">Clubs</span>":&nbsp;["<span class="siut-elem-value">Ace</span>",&nbsp;<span class="siut-elem-value">2</span>,&nbsp;<span class="siut-elem-value">3</span>,&nbsp;<span class="siut-elem-value">4</span>,&nbsp;<span class="siut-elem-value">5</span>,&nbsp;<span class="siut-elem-value">6</span>,&nbsp;<span class="siut-elem-value">7</span>,&nbsp;<span class="siut-elem-value">8</span>,&nbsp;<span class="siut-elem-value">9</span>,&nbsp;"<span class="siut-elem-value">Jack</span>",&nbsp;"<span class="siut-elem-value">Queen</span>",&nbsp;"<span class="siut-elem-value">King</span>"]</span>,<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="suit-item">"<span class="suit-elem-label">Diamonds</span>":&nbsp;["<span class="siut-elem-value">Ace</span>",&nbsp;<span class="siut-elem-value">2</span>,&nbsp;<span class="siut-elem-value">3</span>,&nbsp;<span class="siut-elem-value">4</span>,&nbsp;<span class="siut-elem-value">5</span>,&nbsp;<span class="siut-elem-value">6</span>,&nbsp;<span class="siut-elem-value">7</span>,&nbsp;<span class="siut-elem-value">8</span>,&nbsp;<span class="siut-elem-value">9</span>,&nbsp;"<span class="siut-elem-value">Jack</span>",&nbsp;"<span class="siut-elem-value">Queen</span>",&nbsp;"<span class="siut-elem-value">King</span>"]</span>,<br />
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="suit-item">"<span class="suit-elem-label">Hearts</span>":&nbsp;["<span class="siut-elem-value">Ace</span>",&nbsp;<span class="siut-elem-value">2</span>,&nbsp;<span class="siut-elem-value">3</span>,&nbsp;<span class="siut-elem-value">4</span>,&nbsp;<span class="siut-elem-value">5</span>,&nbsp;<span...

JavaScript

var objJSON = [{
    "name": "52 Card",
    "suits": {
        "Clubs": ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, "Jack", "Queen", "King"],
        "Diamonds": ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, "Jack", "Queen", "King"],
        "Hearts": ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, "Jack", "Queen", "King"],
        "Spades": ["Ace", 2, 3, 4, 5, 6, 7, 8, 9, "Jack", "Queen", "King"]
    }},
{
    "name": "Magyar kártya",
    "suits": {
        "piros": ["VII", "VIII", "IX", "X", "alsó", "felső", "király", "ász"],
        "zöld": ["VII", "VIII", "IX", "X", "alsó", "felső", "király", "ász"],
        "makk": ["VII", "VIII", "IX", "X", "alsó", "felső", "király", "ász"],
        "tök": ["VII", "VIII", "IX", "X", "alsó", "felső", "király", "ász"]
    }}
];

$.ajax({
    url: "/echo/json/",
    data: {
        json: JSON.stringify(objJSON)
    },
    dataType: 'json',
    type: 'POST',
    success: function(content) {
        $.each(content, function(i, elem) {
            setTimeout(function() {
                var cardName = $(".name-value").filter(function() {
                    return $(this).text() === elem.name
                }).parents(".card-holder");
                $.each(elem.suits, function(j, suit) {
                    setTimeout(function() {
                        var suitName = cardName.find(".suit-elem-label:contains('" + j + "')"),
                            suitItemHolder = suitName.parents(".suit-item");
                        suitName.effect("pulsate")
                        $.each(suit, function(k, suitItem) {
                            setTimeout(function() {
                                suitItemHolder.find(".siut-elem-value:contains('" + suitItem + "')").css({
                                    "background-color": "red"
                                });
                            }, 500 * k);
                        });
                    }, j * 1000);
                });
            }, i * 2000);
        });
    }
});