添加新值时如何在网格中排列 bootstrap 个面板？

Question

我有一个基于 bootstrap 3 列/行的网格在每个列中都有一个带有值的面板，这些值是从数据库中获取的，但已订购，但用户可以手动添加一个新面板，我将能够正确设置它的顺序..

就像我的网格可以包含

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 中获取准确价格并在 [=14] 中进行比较=] 函数然后再次将排序的 divs 添加到您的主 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>

添加新值时如何在网格中排列 bootstrap 个面板？

How to order bootstrap panels in a grid when a new value is added?

html

javascript

jquery

twitter-bootstrap-3