0

Buen día a todos, estoy tratando de ordenar varios divs pero no lo he conseguido, mi html es el siguiente:

<div id='div_Gral'>
  <div id='Empleado1' data-sort="43491">
     <div id='imgEmpleado1'></div>
  </div>
  <div id='Empleado2' data-sort="43491">
    <div id='imgEmpleado2'></div>
  </div>
  <div id='Empleado3' data-sort="43491">
    <div id='imgEmpleado3'></div>
  </div>
  <div id='Empleado4' data-sort="43491">
    <div id='imgEmpleado4'></div>
  </div>
</div>

Mi propósito es mediante jquery ordenar los div con id 'Empleado#' ya que dinámicamente creo algunos y no se están ordenando, lo estoy haciendo de la siguiente manera:

$('#div_Gral > div').sort(function (a, b) { 
    return $(b).data('sort') - (a).data('sort'); 
 }).appendTo('#div_Gral');

Asi obtengo el html donde tengo los divs:

var tbl = $('#div_Gral');

En seguida realizo lo siguiente para agregar un div:

var result = "<div id='Empleado2' data-sort="43491"><div id='imgEmpleado2'></div></div> "
tbl.append(result);

Y después de haber agregado ese div, tengo la función para ordenar:

$('#div_Gral > div').sort(function (a, b) { 
  return $(b).data('sort') - (a).data('sort'); 
}).appendTo('#div_Gral');

Pueden guiarme sobre como lo puedo resolver?

6
  • cuando dices que lo armas dinamicamente, utilizas algun array o lista? el 22 ene. 2019 a las 16:43
  • podrias agregar el codigo donde armas dinamicamente el 22 ene. 2019 a las 16:44
  • Te refieres a que los que creas dinamecamente no se ordenan, pero el resto si?
    – alanfcm
    el 22 ene. 2019 a las 16:45
  • Acabo de actualizar la pregunta. la primera vez q creo mi html si tengo todo ordenado, pero cuando deseo agregar uno nuevo, necesito q se ordene dependiendo valor que le pongo a data-sort="43491", ahi es donde ya no se ordena
    – PolloKulos
    el 22 ene. 2019 a las 16:50
  • Listo. tu comentario a sido mas conciso que la pregrunta, y no se te hace mas facil tener esa info en un array y despues volcarlo al html?, de esta forma cuando agregas un valor nuevo lo agregas al array, vuelves a ordenar el array y vuelcas todo al html. el 22 ene. 2019 a las 16:52

2 respuestas 2

1

He modificado el sort que ya tenías, si te fijas en ves de restar los valores estoy comparando los valores con el mayor (>) y al final solo reemplazo el contenido que esta dentro del html del div_Gral.

Espero te sirva de guía.

$(function(){
	$('#btnOrdenar').on('click', function () {
  
		var divOrder = $("#div_Gral > div").sort(function (a, b) {
			return $(a).data("sort") > $(b).data("sort");
		});
		
		$("#div_Gral").html(divOrder);
    
	});
  
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button id="btnOrdenar">Ordenar</button>
    
<div id='div_Gral'>
	<div id='Empleado2' data-sort="43492">
		<div id='imgEmpleado2'>2-imgEmpleado</div>
	</div>
	<div id='Empleado4' data-sort="43494">
		<div id='imgEmpleado4'>4-imgEmpleado</div>
	</div>
	<div id='Empleado1' data-sort="43491">
		<div id='imgEmpleado1'>1-imgEmpleado</div>
	</div>
	<div id='Empleado3' data-sort="43493">
		<div id='imgEmpleado3'>3-imgEmpleado</div>
	</div>
</div>

Por cada vez que agregues información al contenido, solo debes de ejecutar:

var divOrder = $("#div_Gral > div").sort(function (a, b) {
    return $(a).data("sort") > $(b).data("sort");
});

$("#div_Gral").html(divOrder);
3
  • Hola Orlando, no funciona el código. No pasa nada al presionar el botón. Debes revisarlo. Saludos!
    – Fran Islas
    el 22 ene. 2019 a las 17:22
  • A mi me funciona perfectamente. el 22 ene. 2019 a las 17:24
  • Que raro que ami no me funcione.
    – Fran Islas
    el 22 ene. 2019 a las 17:28
1

Te dejo un código de ejemplo, lo importantes que siempre ordenes tus datos en el array antes de volcarlo a tu html. Si deseas agregar un nuevo elemento, lo único que debes hacer es enviarlo a tu array, ordenar y volcar todo de nuevo en tu html.

//arreglo de datos que se usa para crear dinamicamente mis div.
    var empleados = [
      {id:5, nombre:"fran"},
      {id:3, nombre:"juan"},
      {id:2, nombre:"carlos"},
      {id:6, nombre:"pedro"},
    ]

    //Función inicial que uso para correr todo el código y crear mis elementos dinamicamente.
    function init(){
      //Obtengo el contenedor general.
      let contenedor = document.getElementById("div_gral");
      //Limpiamos el contenedor para evitar duplicar los datos.
      contenedor.textContent="";
      //ordeno mis datos.
      ordenarEmpleados();
      
      //una vez ordenados, recorro los datos y comienzo a crear mis elementos.
      empleados.forEach(function(elem){
        let div = document.createElement("div");
        div.setAttribute("id",elem.id);
        div.textContent= "Nombre: "+elem.nombre+" ID: "+elem.id;
        contenedor.appendChild(div);
      });
      
    }

    function compare(a,b) {
    //Condiciones que se van a utilizar para ordenar el array
    //En este caso se va a ordenar por ID de menor a mayor.
      if (a.id < b.id)
        return -1;
      if (a.id > b.id)
        return 1;
      return 0;
    }


    function ordenarEmpleados(){
     return empleados.sort(compare);
    }

    function guardarItem(){
      let item = {};
      item.id = document.getElementById("inputID").value;
      item.nombre = document.getElementById("inputNOMBRE").value;
      
      empleados.push(item);
      init();
      document.getElementById("inputID").value = "";
      document.getElementById("inputNOMBRE").value = "";
    }
    init();
#div_gral{
border: 1px solid blue;
}
Mi contenedor:
<div id="div_gral" ></div>
Agregar un nuevo elemento
<br>
<input id="inputID" type="text" placeholder="ingresar el id">
<input id="inputNOMBRE" type="text" placeholder="ingresar el nombre">
<button onclick="guardarItem()">Guardar</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.