Question

我有以下HTML结构：

scope :recent,  -> { order(created_at: :desc) }

@post = current_user.posts.recent.first

我想这样排序，没有父div：

<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>

最有效，最快捷的方式是什么？

Answer 1

步骤：

找到具有最多“孩子”数量的元素。
循环遍历最大数字和列，以便在每次迭代中从.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

jQuery按类名排序

1 个答案: