jQuery: invertire l'ordine delle colonne nel layout

Il problema delle tecniche CSS per invertire l'ordine delle colonne nel layout è che sono piuttosto complicate da capire e da memorizzare. Inoltre esse richiedono diverse righe di codice per poter funzionare. Con jQuery, invece, possiamo utilizzare il metodo clone() e i metodi insertBefore() o insertAfter() per ottenere lo stesso risultato in sole tre righe di codice. Vediamo come.

Abbiamo la seguente struttura HTML:


<div id="site">

    <div id="header"></div>
    
    <div id="content"></div>
    
    <div id="sidebar"></div>
    
    <div id="extra"></div>
    
    <div id="footer"></div>
</div>

content, sidebar ed extra sono allineati con il floating:


#content, #sidebar, #extra {
	float: left;
	margin: 0;
	padding-top: 0.3em;
}

#content {
	width: 49%;
	background: #ffc;
}

#sidebar, #extra {
	width: 25%;
}

#sidebar {
	background: #cff;
}

#extra {
	background: #def;
}

Vogliamo che content compaia al centro, ossia tra sidebar ed extra. Ecco come possiamo fare con jQuery:


$(function() {

    var $content = $('#content').clone();
    $('#content').remove();
    $content.insertAfter('#sidebar');


});

L'elemento è stato clonato, rimosso e quindi inserito dopo l'elemento sidebar. Il tutto in sole tre righe di codice! Potete visionare l'esempio finale in questa pagina.

Torna su