jQuery Forum

Briefly: I am making a memory-match card game using HTML 5, CSS3 and jQuery. It's working almost flawless on browsers that support HTML5 and CSS3 but I've an issue with IE8.

The HTML code is:

1. <section id="game">
           <div id="cards">
               <div class="card">
                   <div class="face front"></div>
                   <div class="face back"></div>
               </div>
           </div>
           <div style="clear:both"></div>
       </section>

Having this, the idea is to clone the element with class "card", using the pseudo element "first-child" of the element with the id "cards" and after this, to add a class to the elements with class "back" based on some pattern.

jQuery code:

1. for (var i=0;i<23;i++) {
               $(".card:first-child").clone().appendTo("#cards")
           };
   
2. $("#cards").children().each(function(index) {
               var pattern = matchingGame.deck.pop();
               $(this).find(".back").addClass(pattern);
               $(this).attr("data-pattern", pattern);
               $(this).click(selectCard);
           });

Which means that for all children which belong to parent "cards" find the elements with class "back", add a class and an attribute based on the elements of the array.

The problem IS that for the original element (first child) the class and the attribute are not added. The clones get the data but the first child doesn't. I"ve tried some workarounds but with no avail.

Any hint will be very welcomed :).

Cheers