CODEWITHSUNDEEP
javascriptjqueryhtml
Tim Wilkinson
Tim Wilkinson

Reputation: 3801

jQuery: Adding images in order

I have a series of images inside some links

<a href="#" class="flipdown 1">
<img class="bottom" src="numbers/numbers_01.png" /> </a>
<a href="#" class="flipdown 2">
<img class="bottom" src="numbers/numbers_02.png" /> </a>
<a href="#" class="flipdown 3">
<img class="bottom" src="numbers/numbers_03.png" /> </a>
<a href="#" class="flipdown 4">
<img class="bottom" src="numbers/numbers_04.png" /> </a>

Everytime the page loads it jumble each link up using this

(function($) {
$.fn.randomize = function(childElem) {
  return this.each(function() {
     var $this = $(this),
         elems = $this.children(childElem);

  elems.sort(function() { return (Math.round(Math.random())-0.5); });  
  $this.empty();  
  for(var i=0; i < elems.length; i++)

    $this.append(elems[i]);      

  });    
 }
});

I then have another set of images that are in order, and i want to add them inside the jumbled up links, but keeping their order. So i have something that looks like this.

<a href="#" class="flipdown 4">
<img class="bottom" src="numbers/numbers_04.png" /> 
<img class="top" src="letters/letters_01.png" />
</a>
<a href="#" class="flipdown 2">
<img class="bottom" src="numbers/numbers_02.png" />
<img class="top" src="letters/letters_02.png" />
</a>
<a href="#" class="flipdown 1">
<img class="bottom" src="numbers/numbers_01.png" />
<img class="top" src="letters/letters_03.png" />
</a>
<a href="#" class="flipdown 3">
<img class="bottom" src="numbers/numbers_03.png" /> 
<img class="top" src="letters/letters_04.png" />
</a>

so each time the page loads, the letter images remain in order, but the numbers become jumbled. everything i have tried so far has been less than constructive!

Upvotes: 0

Views: 61

Answers (1)

Trevor
Trevor

Reputation: 16116

You can add your letter images dynamically in your for loop like this.

var letterNumber;
for(var i=0; i < elems.length; i++){
    letterNumber = i+1;
    if(letterNumber.toString().length == 1)
        letterNumber = '0'+letterNumber.toString();
    $(elems[i]).append('<img class="top" src="letters/letters_'+letterNumber+'.png" />');
    $this.append(elems[i]); 
}

Upvotes: 1

Related Questions