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

Sorry, the comment form is closed at this time.