dinamicamente organizzare div utilizzando jQuery

Ho la seguente struttura:dinamicamente organizzare div utilizzando jQuery

<div id="container"> 
<div id="someid1" style="float:right"></div> 
<div id="someid2" style="float:right"></div> 
<div id="someid3" style="float:right"></div> 
<div id="someid4" style="float:right"></div> 
</div>

Ora QualcheID è acually un ID univoco per questo div. Ora ricevo un array che ha un ordine diverso, come ad esempio 3,2,1,4, quindi come faccio a spostare questi div in modo che corrispondano al nuovo ordine usando jQuery?

Grazie mille per il vostro tempo.

fonte

2009-05-30 Alec Smart

mia versione plugin - Working Demo

prende un array e il prefisso id opzionale e riordina elementi cui ID corrisponde all'ordine di (prefisso id) + valori all'interno della matrice. Tutti i valori dell'array che non hanno un elemento con l'id corrispondente verranno ignorati e tutti gli elementi secondari che non hanno un ID all'interno dell'array verranno rimossi.

(function($) { 

$.fn.reOrder = function(array, prefix) { 
    return this.each(function() { 
    prefix = prefix || ""; 

    if (array) {  
     for(var i=0; i < array.length; i++) 
     array[i] = $('#' + prefix + array[i]); 

     $(this).empty(); 

     for(var i=0; i < array.length; i++) 
     $(this).append(array[i]);  
    } 
    });  
} 
})(jQuery);

codice dalla demo

jQuery

$(function() { 
    $('#go').click(function() { 

    var order = $('#order').val() == ""? null: $('#order').val().split(","); 
    $('#container').reOrder(order, 'someid'); 
    }); 
}); 

(function($) { 

$.fn.reOrder = function(array, prefix) { 
    return this.each(function() { 
    prefix = prefix || ""; 

    if (array) {  
     for(var i=0; i < array.length; i++) 
     array[i] = $('#' + prefix + array[i]); 

     $(this).empty(); 

     for(var i=0; i < array.length; i++) 
     $(this).append(array[i]);  
    } 
    });  
} 
})(jQuery);

HTML

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 
<head> 
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<title>reOrder Demo</title> 
<meta http-equiv="Content-type" content="text/html; charset=utf-8" /> 
<style type="text/css" media="screen"> 
body { background-color: #fff; font: 16px Helvetica, Arial; color: #000; } 
div.style { width: 200px; height: 100px; border: 1px solid #000000; margin: 5px; } 
</style> 
</head> 
<body> 
<div id="container"> 
<div id="someid1" class="style" style="background-color:green;">div1</div> 
<div id="someid2" class="style" style="background-color:blue;">div2</div> 
<div id="someid3" class="style" style="background-color:red;">div3</div> 
<div id="someid4" class="style" style="background-color:purple;">div4</div> 
</div> 
<p>Pass in a comma separated list of numbers 1-4 to reorder divs</p> 
<input id="order" type="text" /> 
<input id="go" type="button" value="Re-Order" /> 


</body> 
</html>

fonte

2009-05-30 11:51:00

Eccellente.Ho appena usato questo per avere un sistema di ordinazioni "più/meno" su un elenco di li. Adattato meravigliosamente. –

Bel lavoro. Questo è stato utile. –

Sei fantastico. Grazie. – Joel

Se si dispone di tutto il contenuto dell'array, rimuovere tutto il contenuto dal contenitore del contenitore nel codice. quindi iniziare aggiungendo dei div ricevuti uno per uno:

var v = $(ar[0]).append(ar[1]).append(ar[2]); 
$("#container").html(v);

Se questo non funziona quindi esaminare this thread che discute sugli elementi di posizionamento relativo ad altri elementi.

fonte

2009-05-30 10:58:56 TheVillageIdiot

[Edit], questo è testato e funziona:

var order = [3,2,1,4]; 
var container = $("#container"); 
var children = container.children(); 
container.empty(); 
for (var i = 0; i < order.length; i++){ 
    container.append(children[order[i]-1]) 
}

L'i-1 è necessaria in quanto la vostra ordinazione inizia da 1, ma le matrici sono indicizzate da 0.

Grazie a JP e Russ Cam per avermi fatto vedere di nuovo.

fonte

2009-05-30 11:00:52

Nel proprio ciclo, il valore "i" sarà solo 0, 1, 2, 3 e non i valori dall'array dell'ordine. Invece, è necessario container.append (children [order [i] -1]); Sentiti libero di provare qui: http://code.google.com/apis/ajax/playground/#jquery – andreialecu

È una cattiva pratica usare i cicli for-in negli array regolari. – James

@ J-P cosa è una buona/migliore pratica allora? –

Ecco una soluzione jQuery-less:

function appendNodesById(parent, ids) { 
    for(var i = 0, len = ids.length; i < len; ++i) 
     parent.appendChild(document.getElementById(ids[i])); 
} 

appendNodesById(document.getElementById('container'), 
    ['someid4', 'someid2', 'someid3', 'someid1']);

fonte

2009-05-30 12:00:10 Christoph

dinamicamente organizzare div utilizzando jQuery

risposta

Problemi correlati