javascript - jQuery 按类名排序

Question

我有以下 HTML 结构:

<div class="col col1">
   <div class="colSub1"></div>
   <div class="colSub1"></div>
</div>
<div class="col col2">
   <div class="colSub2"></div>
   <div class="colSub2"></div>
   <div class="colSub2"></div>
</div>
<div class="col col3">
   <div class="colSub3"></div>
   <div class="colSub3"></div>
</div>

我想像这样排序，没有父 div:

<div class="colSub1"></div>
<div class="colSub2"></div>
<div class="colSub3"></div>
<div class="colSub1"></div>
<div class="colSub2"></div>
<div class="colSub3"></div>
<div class="colSub2"></div>

最有效、最快的方法是什么？

Answer 1

步骤:

1. 查找“子元素”数量最多的元素。
2. 循环遍历最大数量和列，以便在每次迭代中将从 .col 中获取一项。

如果有不清楚的地方，请告诉我。

工作代码:

var cols = $('.col');
var max = Math.max.apply(null, cols.map(function() {
  return $(this).children().length;
}).get());

for (var i = 0; i < max; i++) {
  for (var j = 0; j < cols.length; j++) {
    $('#result').append(cols.eq(j).children().eq(i).clone());
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h3>Before</h3>
<div class="col col1">
  <div class="colSub1">col1 - colSub1</div>
  <div class="colSub1">col1 - colSub1</div>
</div>
<div class="col col2">
  <div class="colSub2">col2 - colSub2</div>
  <div class="colSub2">col2 - colSub2</div>
  <div class="colSub2">col2 - colSub2</div>
</div>
<div class="col col3">
  <div class="colSub3">col3 - colSub3</div>
  <div class="colSub3">col3 - colSub3</div>
</div>

<hr />
<h3>After</h3>
<div id="result"></div>

http://jsbin.com/lavemu/edit?html,js