使用jQuery重新排序Divs

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>