JQuery: Добавление изображений в порядке

Question

У меня есть ряд изображений внутри некоторых ссылок

<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 страница загружается она перемешивать каждую ссылку с использованием этого

(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]);  

    });  
} 
}); 

Я тогда еще один набор изображений которые находятся в порядке, и я хочу добавить их внутри перемешанных ссылок, но сохраняя их порядок. Поэтому у меня есть что-то похожее на это.

<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> 

поэтому каждый раз, когда страница загружается, изображения букв остаются в порядке, но цифры становятся беспорядочными. все, что я пробовал до сих пор, было менее конструктивным!

Answer 1

Вы можете добавить свои картинки letter в динамический цикл:

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]); 
}