Question

我有一些div，到现在为止大约90，我想为移动版本重新排序，我尝试了flex，但它不能很好地工作，我开始使用插入之前的Jquery。但我认为在加载时会非常耗费时间。这是我正在使用的代码：

<script>
if($(window).width() < 1024){
$( "#img1" ).insertBefore( "#img2" );
$( "#img2" ).insertBefore( "#img3" );
$( "#img3" ).insertBefore( "#img4" );
$( "#img4" ).insertBefore( "#img5" );
$( "#img5" ).insertBefore( "#img6" );
$( "#img6" ).insertBefore( "#img7" );
}
</script>

Answer 1

以下是我根据理解尝试过的示例。图像以随机顺序添加到DOM上。 JQuery代码根据ID对图像进行排序，并按排序顺序显示：

$(document).ready(function() {
  var imgIds = [];
  $('img').each(function() {
    imgIds.push($(this).attr('id'))
  });
  imgIds.sort();

  $(imgIds).each(function(k, v) {
    if($("#" + v).length) {
      var imgClone = $("#" + v).clone();
      $(imgClone).removeAttr('id');
      $("#" + v).remove();
      $(".container_1").append($(imgClone));
    }
  });
  $(".container").remove(); // empty this container to lighten the DOM
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='container'>
  <img id='img1' src='http://via.placeholder.com/350x150?text=1' />
  <img id='img3' src='http://via.placeholder.com/350x150?text=3' />
  <img id='img5' src='http://via.placeholder.com/350x150?text=5' />
  <img id='img2' src='http://via.placeholder.com/350x150?text=2' />
  <img id='img4' src='http://via.placeholder.com/350x150?text=4' />
</div>
<div class='container_1'>
</div>

Answer 2

var divs = $('body').find('div');
divs.sort(function (a, b) {
  return parseInt(a.id.replace('img','')) > parseInt(b.id.replace('img',''));
});
$('body').html(divs);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div id="img3">3</div>
  <div id="img11">11</div>
  <div id="img1">1</div>
  <div id="img2">2</div>
</body>

Div使用jquery重新排序

2 个答案: