dinámicamente pueden organizar la divs utilizando jQuery

tengo la siguiente estructura:dinámicamente pueden organizar la divs utilizando 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>

Ahora someid es acually un identificador único para ese div. Ahora recibo una matriz que tiene un orden diferente, digamos someid 3,2,1,4, ¿cómo puedo mover estos divs para que coincidan con el nuevo orden usando jQuery?

Gracias mucho por su tiempo.

Fuente

2009-05-30 Alec Smart

Mi versión Plugin - Working Demo

toma una matriz y el prefijo ID opcional y reordena los elementos cuyos ID corresponden a la orden de (prefijo ID) + valores dentro de la matriz. Se ignorarán todos los valores de la matriz que no tengan un elemento con la ID correspondiente, y se eliminarán todos los elementos secundarios que no tengan una identificación dentro de la matriz.

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

Código de la 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>

Fuente

2009-05-30 11:51:00

Excelente.Acabo de utilizar esto para tener un sistema de pedido "más/menos" en una lista de li's. Adaptado maravillosamente. –

Buen trabajo. Esto fue útil. –

Eres increíble. Gracias. – Joel

Si tiene todo el contenido de la matriz, elimine todo el contenido del contenedor contenedor de contenedor en su código. a continuación, empezar a añadir los divs recibido uno por uno:

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

Si esto no funciona, entonces mirar en this thread que discute acerca de los elementos de posicionamiento en relación con otros elementos.

Fuente

2009-05-30 10:58:56 TheVillageIdiot

[Editar], Esta es probado y funciona:

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

El i-1 es necesario ya que su ordenamiento comienza en 1, pero arrays están indexados de 0.

Gracias a JP y Russ Cam por hacerme verlo de nuevo.

Fuente

2009-05-30 11:00:52

En su ciclo, el valor 'i' será simplemente 0, 1, 2, 3 y no los valores de la matriz de órdenes. En cambio, necesita container.append (children [orden [i] -1]); No dude en probar aquí: http://code.google.com/apis/ajax/playground/#jquery – andreialecu

Es una mala práctica usar bucles for-in en arreglos normales. – James

@ J-P, ¿qué es una buena/mejor práctica entonces? –

Aquí hay una solución jQuery-menos:

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

Fuente

2009-05-30 12:00:10 Christoph

dinámicamente pueden organizar la divs utilizando jQuery

Respuesta

Cuestiones relacionadas