添加新值时如何在网格中订购引导面板？

Question

我有一个基于 bootstrap 3 的网格，带有 col / rows 每个 col 内部都有一个带有值的面板， 这些值是从 DB 中获取的，但已排序，但用户可以手动添加一个新面板，我可以将其设置为正确排序..

就像我的网格可以包含

1 2 3 +

当点击 + 时，用户可以在 3 之后添加 4，或者他可以在 2 之前添加 1.50，依此类推

这是我的网格的样子，带有一个静态添加示例

$('.add').on("click", function() { // in live version i'm adding new col after AJAX request response is gone OK
  $('<div>', {
    class: 'col-md-3'
  }).append(
    $('<div>', {
      class: 'panel panel-default taglio'
    }).append(
      $('<div>', {
        class: 'panel-body text-center'
      }).text("€" + parseFloat(1.50).toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, "."))
    ).data('id', -1)
  ).insertBefore($(this).parent());
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row">
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€15.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€5.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default add" data-toggle="modal" data-target="#modalAdd">
      <div class="panel-body text-center">+</div>
    </div>
  </div>
</div>

那么我如何在每次添加新项目时重新排列面板？

Answer 1

由于您在 div 中显示价格，您可以使用 .find 和 .replace 从 div 中获取准确的价格并在 sort 函数中比较它们，然后再次在主 div 中附加排序的 div。

演示代码：

$(document).on("click", ".add", function() {
  $('<div>', {
    class: 'col-md-3'
  }).append(
    $('<div>', {
      class: 'panel panel-default taglio'
    }).append(
      $('<div>', {
        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
});

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div class="row mian_div">
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€15.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€5.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default taglio">
      <div class="panel-body text-center">€10.00</div>
    </div>
  </div>
  <div class="col-md-3">
    <div class="panel panel-default add" data-toggle="modal" data-target="#modalAdd">
      <div class="panel-body text-center">+</div>
    </div>
  </div>
</div>