¿Cómo ordenar los paneles de arranque en una cuadrícula cuando se agrega un nuevo valor?

Question

Tengo una cuadrícula basada en bootstrap 3 con col / filas dentro de cada col hay un panel con un valor, los valores se obtienen de DB pero el usuario podría agregar un nuevo panel manualmente y yo sería capaz de configurarlo correctamente. como mi cuadrícula podría contener 1 2 3 + cuando + se hace clic en el usuario puede añadir 4 que debe ser añadido después de 3 o puede añadir 1.50 que debe ser añadido antes de 2 y así sucesivamente Así es como mi cuadrícula parece con un ejemplo de adición estática $('.add').on( click , function() { // in live version i'm adding new col after AJAX request response is gone OK $(' ', { class: 'col-md-3' }).append( $(' ', { class: 'panel panel- default taglio' }).append( $(' ', { class: 'panel-body text-center' }).text( €  + parseFloat(1.50).toFixed(2).replace(/ B(?=( d{3})+(?! d))/g,  . )) ).data('id', -1) ).insertBefore($(this).parent()); }); €10.00 €15.00 €5.00 €10.00  + ¿Cómo podría reordenar los paneles cada vez que se añade un nuevo elemento?

codechampion · Accepted Answer

Como, usted está mostrando precios dentro de su div usted puede utilizar .find y .replace para obtener el precio exacto de divs y compararlos dentro sort función entonces anexar divs ordenados dentro de su div principal de nuevo.

Código de Demo :

$(document).on("click", ".add", function() {
  $('', {
    class: 'col-md-3'
  }).append(
    $('', {
      class: 'panel panel-default taglio'
    }).append(
      $('', {
        class: 'panel-body text-center'
      }).text("€" + parseFloat(7.50).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, "."))
    ).data('id', -1)
  ).insertBefore($(this).parent());
  //sort your divs
  var result = $('div.mian_div > div').sort(function(a, b) {
    //get price 
    var contentA = parseFloat($(a).find('.taglio > div').text().replace('€', '').trim());
    var contentB = parseFloat($(b).find('.taglio > div').text().replace('€', '').trim());
    return (contentA < contentB) ? -1 : (contentA > contentB) ? 1 : 0;
  });
  $('div.mian_div').html($(result)) //add result
});

Respondida el Dec 18, 2020 a las 08:57 - por codechampion

Gpt · Answer

Para reorganizar los paneles cada vez que se agregue un nuevo elemento, puedes seguir estos pasos:

Asigna un identificador único a cada panel al crearlos. Puedes usar un contador para asignar estos identificadores.

Al agregar un nuevo panel, guarda su identificador en un arreglo.

Ordena el arreglo de identificadores con respecto a los valores de los paneles.

Reordena los paneles en la cuadrícula según el orden del arreglo de identificadores.

Aquí te dejo un ejemplo de cómo podrías implementar esto en tu código:

js
// Array para almacenar los identificadores de los paneles
var panelIds = [];

$('.add').on("click", function() {
  // Código para agregar un nuevo panel

  // Obtener el valor del nuevo panel
  var nuevoValor = parseFloat(1.50);

  // Crear un identificador único para el nuevo panel
  var nuevoPanelId = panelIds.length + 1;

  // Agregar el identificador del nuevo panel al arreglo
  panelIds.push(nuevoPanelId);

  // Ordenar los identificadores basados en los valores de los paneles
  panelIds.sort(function(a, b) {
    // Obtener los valores de los paneles correspondientes a los identificadores
    var valorA = parseFloat($('.panel[data-id="' + a + '"]').text().replace('€', ''));
    var valorB = parseFloat($('.panel[data-id="' + b + '"]').text().replace('€', ''));

    return valorA - valorB;
  });

  // Reordenar los paneles en la cuadrícula según el orden del arreglo de identificadores
  panelIds.forEach(function(id) {
    $('.panel[data-id="' + id + '"]').closest('.col-md-3').appendTo('.row');
  });
});

Con este código, cada vez que se agregue un nuevo elemento, los paneles se reordenarán en la cuadrícula según sus valores. Asegúrate de ajustar el código según las especificidades de tu caso particular.

Respondida el Dec 19, 2020 a las 08:58 - por Gpt

Gemini · Answer

Para reordenar los paneles en tu cuadrícula Bootstrap cada vez que se agrega un nuevo elemento, puedes usar el siguiente método:

Obtén el valor del nuevo panel: Captura el valor del nuevo panel utilizando jQuery.

Recorre los paneles existentes: Iterar sobre los paneles existentes en la cuadrícula para encontrar la posición correcta para el nuevo panel.

Compara el valor: Compara el valor del nuevo panel con los valores de los paneles existentes.

Inserta el nuevo panel: Una vez que hayas encontrado la posición correcta, inserta el nuevo panel antes del panel que tenga un valor mayor que el valor del nuevo panel.

Aquí tienes un ejemplo de código que implementa este método:

js
$('.add').on("click", function() {
  // Obtener el valor del nuevo panel
  var newPanelValue = parseFloat($('.panel-body', this).text().replace(/[^\d.]/g, ''));

  // Recorrer los paneles existentes
  $('.taglio').each(function() {
    // Obtener el valor del panel actual
    var currentPanelValue = parseFloat($(this).find('.panel-body').text().replace(/[^\d.]/g, ''));

    // Comparar el valor
    if (newPanelValue < currentPanelValue) {
      // Insertar el nuevo panel antes del panel actual
      $(this).before($('', {
        class: 'col-md-3'
      }).append(
        $('', {
          class: 'panel panel-default taglio'
        }).append(
          $('', {
            class: 'panel-body text-center'
          }).text("€" + parseFloat(newPanelValue).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ".")
        ).data('id', -1)
      ));

      // Salir del bucle
      return false;
    }
  });
});

Este código ordenará los paneles de tu cuadrícula Bootstrap en orden ascendente cada vez que se agregue un nuevo panel.

Respondida el Dec 19, 2020 a las 09:08 - por Gemini

¿Cómo ordenar los paneles de arranque en una cuadrícula cuando se agrega un nuevo valor?

3 Respuestas: