Adding a random class to element from an array that duplicates using jQuery

Question

I'm creating a matching game and I'm trying to add a class from an array to match against. The code I have below creates the classes I need, then randomizes them.

My problem is in the randomizeDeck function. I'm trying to add each of the classes to the specified element twice. When I console.log the code the classes gets added to the first six elements but not the last six, which I need it to do so that I have the classes to match against in the matching game I'm creating.

var cardDeck = new Array();

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
    }
}
createDeck();

var randDeck = cardDeck.sort(randOrd);

function randomizeDeck() {
    card.each(function(i){
        $(this).addClass(randDeck[i]);
    });
}
randomizeDeck();

The variable card is a div with the class card. That div is replicated 12 times. — Johanna Ruiz
– Johanna Ruiz, Commented Sep 26, 2013 at 18:52

andi · Accepted Answer · 2013-09-26 19:11:05Z

1

I think your createDeck function needs to create 12 classes instead of 6. Just push each one twice:

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
        cardDeck.push("card-" + i);
    }
}

Then you'll have an array of 12 classes (2 each of 6 unique classes), which will be randomized and assigned to the 12 cards.

answered Sep 26, 2013 at 19:11

andi

6,5421 gold badge20 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

BumbleB2na Over a year ago

Don't forget the randomized sort that happens on her initial array.

andi Over a year ago

@BumbleB2na - That sort will work fine with this. Do you see an issue?

BumbleB2na Over a year ago

actually no.. now that you mention it that would mix them up better than in my solution

Andy · Accepted Answer · 2013-09-26 19:16:17Z

0

I suggest a separate variable to keep track of the index, rather that the each index. Once you've gone through the pack once, it might be a good idea to shuffle the deck again so the order is different on the second pass. YMMV.

function sortCards(randOrd) {
  randDeck = cardDeck.sort(randOrd);
}

function randomizeDeck() {
  var count = 0;
  cards.each(function(i) {
    if (i === 6) { count = 0; sortCards(randOrd); }
    $(this).addClass(randDeck[count]);
    count++;
  });
}

answered Sep 26, 2013 at 19:16

Andy

63.6k13 gold badges72 silver badges99 bronze badges

Comments

BumbleB2na · Accepted Answer · 2013-09-26 19:09:13Z

0

Your randomizeDeck() function can be rewritten to use the same array of class names twice:

function randomizeDeck() {
    card.each(function(i){
        if(i < 6)
            $(this).addClass(randDeck[i])
        else
            $(this).addClass(randDeck[i-6]);
    });
}

Note: I would rewrite the variable card as $cards so that you know it's a jQuery object and in this case a collection of them. Otherwise, its hard to tell it apart from any other javascript var.

edited Sep 26, 2013 at 19:09

answered Sep 26, 2013 at 18:51

BumbleB2na

10.8k6 gold badges30 silver badges31 bronze badges

4 Comments

Johanna Ruiz Over a year ago

That is correct, there are a dozen cards that I'm trying to add a class that is duplicated for matching purposes. e.g. card-1 that has a match of card-1 etc.

BumbleB2na Over a year ago

Then you're going outside the bounds of your array

Johanna Ruiz Over a year ago

Any suggestion on how I could apply the same array to the entire block of elements?

BumbleB2na Over a year ago

Sure but I'm still only guessing with my answer. Some of your code is hidden, such as assigning the value of card and seeing more of your code would help.

James Daly · Accepted Answer · 2013-09-26 19:16:47Z

0

Try something like this - it's tested now updated SEE THIS FIDDLE http://jsfiddle.net/8XBM2/1/

var cardDeck = new Array();

function createDeck() {
    for (i = 1; i <= 6; i++) {
        cardDeck.push("card-" + i);
    }
}
createDeck();
var randDeck = cardDeck.sort();
alert(randDeck);

function randomizeDeck() {
    var x = 0;
    $('div').each(function(i){
     if ( i > 5) { 

                $(this).addClass(randDeck[x]);
         x++; 
      } else {
        $(this).addClass(randDeck[i]);
    }
    });
}
randomizeDeck();

edited Sep 26, 2013 at 19:16

answered Sep 26, 2013 at 19:00

James Daly

1,42617 silver badges27 bronze badges

2 Comments

James Daly Over a year ago

I am assuming you want to restart the iteration again after 6

Johanna Ruiz Over a year ago

Yeah, I want the array to be applied twice so that I have a class that I can match two cards against.

Collectives™ on Stack Overflow

Adding a random class to element from an array that duplicates using jQuery

4 Answers 4

3 Comments

Comments

4 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related