Zmena poradia HTML elementov

Predstavte si, že máte na stránke sériu obrázkov, ktoré chcete pri každom načítaní stránky zobraziť vždy v inom poradí. V podstate na to máte dve možnosti. Urobiť to na strane servera, alebo na strane klienta pomocou Javascriptu. Dnes vám ukážem ako sa to dá jednoducho spraviť pomocou jQuery pluginu.

Použijeme na to jQuery plugin reorder, ktorý náhodne zmení poradie všetkých elementov vybraného elementu. Čiže sa nemusí jednať len o obrázky, ale môžeme to aplikovať na hocijaké vnorené elementy.

Ako príklad si zoberme nasledujúci HTML kód:

<div id="reorder">
<div>DIV</div>
<p>Paragraph</p>
<ul>
<li>nezotriedený</li>
<li>zoznam</li>
</ul>
</div>

V tomto prípade sú elementy <div>, <p> a <ul> vnorené elementy <div>u s id reorder.

Na ich náhodné „premiešanie“ nám stačí nasledujúci javascript kód:

$("#reorder").reorder();

Môžete si to vyskúšať na nasledujúcom príklade, kde sa pri kliknutí na link vykoná spomenutý JS kód.

Klik sem pre premiešanie

Samozrejme, aby to fungovalo tak nezabudnite do stránky vložiť aj jquery.js a jqueryreorder.js.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jqueryreorder.js"></script>