Question

Sorry if this question is dumb, I don’t think it is because I can’t find a straight answer. I’m trying to implement the standard Fisher-Yates shuffle, but on a jQuery-wrapped array of DOM elements. I.e. the usual ‘swap’ algorithm.

The idea was to implement shuffling a deck of cards.

My initial simple (but hacky) solution:

1) assign an index attribute to each DOM element, and at the same time create a list of indices.

indices = [];
deck.each(function(i){
    $(this).attr('index',i);
    indices[i] = i;        
});

2) shuffle the indices array,

for(i=0;i<indices.length;i++){
    temp = indices[i]; 
    j = Math.floor((Math.random()*i));
    indices[i]=indices[j];
    indices[j]=temp; 
}

and iterate through them, using something like, I dunno, say:

for(i=0;i<indices.length;i++){
     randomCard = $('[index='+indices[i]+']');
     //do amazing game-like things
}

---

BUT…I hate this solution, it feels extremely hacky. I’d much rather manipulate the wrapped set.

---

SO…

Once again here’s the pseudo code for the Fisher-Yates shuffle.

deck.each(function(i){ 
    temp = deck[i]; //except that I want deck[i] to be a **wrapped object**

    j = Math.floor((Math.random()*i));

    deck[i]=deck[j]; //and deck[j] should find a wrapped object in the 'elements' set with index j

    deck[j]=temp; //and this should perform the swap.

    alert("I can haz swapburgers!!!");  //yay.
});

The part I don’t understand how to do is to set the value of an element in a jQuery wrapped object by its index. Should I be passing the indices and the parent element to a swap function? Something like

swap($(this).parent(),i,j);

If anyone can help me sort this out I’d appreciate it. I hope all of this is clear. Please let me know if it’s confusing and I’ll try to clarify.

Answer 1

It looks like you can just treat the jquery selection like a normal array, as far as swapping goes.

function swap(obj, index1, index2) {
    var temp = obj[index1];
    obj[index1] = obj[index2];
    obj[index2] = temp;
}