Come posso invertire l’ordine di un con un clic di un pulsante?

Ho cercato di usare jQuery per fare in modo che una funzione del tasto inverta l’ordine di

    .

    Per qualche motivo, il codice scombina completamente con lo stile degli ul quando si fa clic. Potrebbe essere a causa del caricatore pigro che sto usando per le immagini (qazy.js), ma non ne sono del tutto sicuro. Sembra solo rompere il

      .

      Puoi vedere il codice live qui: http://designers.watch/tester.html

      Vedrai l’effetto indesiderato quando fai clic sul pulsante “Ordine inverso”.

      Il codice che uso al contrario di

        è:

         $(document).ready(function(){ $("#rev").click(function(){ var list = $("ul li").get().reverse(); $("ul").empty(); $.each(list, function(i){ $("ul").append("
      • "+list[i].innerHTML+"
      • "); });//each });//function });//ready

        I due problemi sono:

        • Gli stili sono incasinati.
        • Il caricatore pigro non caricherà le immagini che sono state portate in cima alla lista dall’ordine inverso.

        C’è un modo per risolvere questi problemi? Dovrei usare uno script di caricatore pigro diverso?

        Grazie in anticipo a chiunque lo aiuti.

        Il tuo “Ordine inverso” non inverte i tuoi, ne sta creando di nuovi e quelli nuovi sono diversi da quelli vecchi: mancano le class class e perdi gli attributi dello schema. Questo dovrebbe fare il trucco in termini di miglioramento di ciò che hai già:

         $(document).ready(function(){ $("#rev").click(function(){ var list = $("ul li").get().reverse(); $("ul").empty(); $.each(list, function(i){ $("ul").append('
      • '+list[i].innerHTML+'
      • '); });//each });//function });//ready

        Controlla questa domanda per ulteriori informazioni sul riordino degli elementi dell’elenco: jQuery che inverte l’ordine degli elementi secondari

        Caricatore pigro è un problema più grande, e penso che avrebbe bisogno di essere reinizializzato dopo aver fatto il reverese, dal momento che gli elementi della lista e i loro figli sono nuovi e non hanno eventi caricatore pigri collegati dallo script. Se riesci a riordinare correttamente, questo problema potrebbe scomparire.

        Non dovresti mai usare la serializzazione HTML solo per spostare elementi intorno alla pagina, poiché scoprirai che perdono cose come gestori di eventi, stili, ecc.

        Basta provare questo, invece:

         $('#li-switch').on('click', function() { // get reversed array of elements var el = $('ul li').get().reverse(); // re-append them to their parent $('ul').append(el); }); 
          
        Click to reverse the order
        • One
        • Two
        • Three
        • Four
        • Five