Apr 102013
Oggi proviamo a spostare degi elementi della mostra pagina su e giù usando le funzioni insertAfter e insertBefore.
L’html sarà costituito da 5 div contenenti un testo e due bottoni per gli spostamenti, al primo posto nasconderemo via css il bottone su, all’ultimo posto nasconderemo il bootone giù.
<style> div:first-of-type button.up {visibility: hidden;} div:last-of-type button.down {visibility: hidden;} </style> ... <div> <button>Up</button> <button>Down</button> Primo elemento. </div> <div> <button>Up</button> <button>Down</button> Secondo elemento. </div> <div> <button>Up</button> <button>Down</button> Terzo elemento. </div> <div> <button>Up</button> <button>Down</button> Quarto elemento. </div> <div> <button>Up</button> <button>Down</button> Quinto elemento. </div>
Al document.ready mapperemo gli eventi in base alle classi e sposteremo con la nostra funzione il parent, cioè l’oggetto contenitore del buotton premuto
$(document).ready(function() { $('.up').click(function() { var parent = $(this).parent(); parent.insertBefore(parent.prev()); }); $('.down').click(function() { var parent = $(this).parent(); parent.insertAfter(parent.next()); }); });
L’ultima nota interessante riguarda l’elemento risptto al quale fare lo spostamento, ma questo sarà restituito dalla funzione prev() o next(), cioè il precedente o il successivo allo stesso livello.
L’esempio
Google+
Sorry, the comment form is closed at this time.