[SOLUCIONADO] Ordenar funcion each

[Maganius]

Wenass

Estoy intentando ordenar los resultados de una clase para realizar un each con jquery un ejemplo:

Código HTML:

<div class='Column_dias Dia_column_1'></div>
<div class='Column_dias Dia_column_2'></div>
<div class='Column_dias Dia_column_4'></div>
<div class='Column_dias Dia_column_3'></div>
 

Quiero realizar un each de la clase Column_dias pero que me devuelva ordenado de esta forma:

Código HTML:

<div class='Column_dias Dia_column_1'></div>
<div class='Column_dias Dia_column_2'></div>
<div class='Column_dias Dia_column_3'></div>
<div class='Column_dias Dia_column_4'></div>
 

Los divs los agrego dinamicamente con jquery.append por eso pueden salir desordenados al principio pero al ejecutar el each deben estar ordenados.

No se me ocurre como podria modificar ese orden.

El jquery:

Código Javascript:

$(".Column_dias").each(function(index){
        var cualDia = $(this).attr("class").split(" ");
              cualDia = cualDia[1].split("_");
              cualDia = cualDia[2];
              alert(cualDia);
})
 

[Alexis88]

Te sugiero insertar esos elementos <div> en un contenedor, de este modo, tomas a los elementos <div> del contenedor en cuestión, los asignas a un array, quitas el contenido del contenedor y con el método sort, realizas el ordenamiento según el número que aparece luego del último guión bajo en la segunda clase de cada elemento para finalmente insertar cada elemento del array ordenado en el contenedor.



Saludos

[Maganius]

Hola Alexis88, gracias por responder y por el ejemplo.

No es algo viable eliminar los divs ya que cada DIV contiene información y posiciones absolutas muy importantes por lo que si eliminaría los div tendría que re-construir toda esa información.

Aun no se me ocurre como ordenar el DOM ya que es algo muy importante porque hago una comprobación de mayor y menor un ejemplo:

Código HTML:

<div class='Column_dias Dia_column_1'></div>
<div class='Column_dias Dia_column_2'></div>
<div class='Column_dias Dia_column_4'></div>
<div class='Column_dias Dia_column_3'></div>
 

Código Javascript:

var Dia_seleccionado = 3;
$(".Column_dias").each(function(){
              var cualDia = $(this).attr("class").split(" ");
              cualDia = cualDia[1].split("_");
              cualDia = cualDia[2];
 
      if(Dia_seleccionado>cualDia){
          $(this).animate("left","+=50");
      }
})
 

Lo que estoy intentando realizar es: mover todos los días a la derecha siempre y cuando sean mayor al día que seleccione previamente.

Problema:

Al generarse dinamicamente el último día el DOM queda de la forma anteriormente mostrado por lo que la comprobación dentro del each no la hace correctamente.

[Maganius]

Ya logre ordenar el DOM de esta forma:

Código Javascript:

$("div[id^=Dia_column]").sort(function(a,b){                                
 
    if(a.id.replace('Dia_column', '') < b.id.replace('Dia_column', '')) {
            return -1;
    } else {
            return 1;
    }
}).each(function(index){
         console.log(this.id)
})
 

[Alexis88]

No sé si analizaste el código, pero antes de sacar los <div>, creo una copia de ellos y luego los ordeno para insertarlos en el contenedor, de modo que nunca pierdes la información que contenían los originales.

Saludos