2009-05-30 6 views
9

J'ai la structure suivante:Dynamiquement utilisant jQuery divs organiser

<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> 

maintenant someid est acually un identifiant unique pour cette div. Maintenant, je reçois un tableau qui a un ordre différent dit someid 3,2,1,4, alors comment puis-je déplacer ces divs pour correspondre à la nouvelle commande en utilisant jQuery?

Merci beaucoup pour votre temps.

Répondre

22

Ma version plugin - Working Demo

prend un tableau et le préfixe identifiant facultatif et réordonne les éléments dont les identifiants correspondent à l'ordre de (préfixe identifiant) + valeurs à l'intérieur de la matrice. Toutes les valeurs du tableau qui n'ont pas d'élément avec l'identifiant correspondant seront ignorées et tous les éléments enfants qui n'ont pas d'identifiant dans le tableau seront supprimés.

(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); 

code de la démo

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> 
+1

Excellent.Je l'ai juste utilisé pour avoir un système de commande "plus/moins" sur une liste de li. Adapté à merveille. –

+0

Beau travail. C'est très pratique. –

+0

Vous êtes génial. Merci. – Joel

0

Si vous avez tout le contenu dans le tableau, puis retirez tout le contenu de l'emballage div conteneur dans votre code. puis commencer à ajouter les divs reçus un par un:

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

Si cela ne fonctionne regarde alors dans this thread qui traite sur les éléments de positionnement par rapport aux autres éléments.

2

[Modifier], Ceci est testé et fonctionne:

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]) 
} 

Le i-1 est nécessaire puisque votre commande commence à 1, mais les tableaux sont indexés à partir de 0.

Merci à JP et Russ Cam pour me faire regarder à nouveau.

+0

Dans votre boucle, la valeur 'i' sera simplement 0, 1, 2, 3 et non les valeurs du tableau de commande. Au lieu de cela, vous avez besoin de container.append (children [order [i] -1]); N'hésitez pas à tester ici: http://code.google.com/apis/ajax/playground/#jquery – andreialecu

+1

C'est une mauvaise habitude d'utiliser des boucles for-in dans les baies régulières. – James

+0

@ J-P qu'est-ce qu'une bonne/meilleure pratique alors? –

2

Voici une solution jQuery moins:

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']); 
Questions connexes