在其他 DIV 中对 DIV 进行排序 [重复]

Question

可能重复：
How to sort divs according to their id using jQuery?

好吧，我很难解决这个问题，实际上直到现在我都没有成功，我正在尝试按 ID 对其他 DIV 中的 DIV 进行排序。 下面是我的 DIV 在我的页面中的分布方式

<div id="products" >
   <div class="line">
      <div id="Album2">[there are images and even other divs here in each Album]</div>
      <div id="Album1"></div>
      <div id="Album10"></div>
      <div id="Album16"></div>
   </div>
   <div class="line">
      <div id="Album9"></div>
      <div id="Album3"></div>
      <div id="Album4"></div>
      <div id="Album7"></div>
   </div>
   <div class="line">
      <div id="Album5"></div>
      <div id="Album11"></div>
      <div id="Album6"></div>
      <div id="Album13"></div>
   </div>
   <div class="line">
      <div id="Album8"></div>
      <div id="Album14"></div>
      <div id="Album12"></div>
      <div id="Album15"></div>
   </div>
</div>

这应该是我的输出：

  <div id="products" >
       <div class="line">
          <div id="Album1"></div>
          <div id="Album2"></div>
          <div id="Album3"></div>
          <div id="Album4"></div>
       </div>
       <div class="line">
          <div id="Album5"></div>
          <div id="Album6"></div>
          <div id="Album7"></div>
          <div id="Album8"></div>
       </div>
       <div class="line">
          <div id="Album9"></div>
          <div id="Album10"></div>
          <div id="Album11"></div>
          <div id="Album12"></div>
       </div>
       <div class="line">
          <div id="Album13"></div>
          <div id="Album14"></div>
          <div id="Album15"></div>
          <div id="Album16"></div>
       </div>
    </div>

但我还有一个问题，我所有的产品都列出了，而且不止一页，我实际上能够跟踪它们并制作了一个排序的字符串数组，但我没有同样的运气这样做DIV。 这是我的页面： http://biscoitofino.jumpseller.com/catalogo

有什么建议吗？ 提前致谢。

Answer 1

应该这样做，至少在单个页面的上下文中：

var lines = $("#products .line");
var elems = $("#products .line div");
for (var index = 1; index <= elems.length; index++) {
    var elemId = "Album" + index;
    var containerIndex = parseInt((index - 1) / 4);
    var container = lines[containerIndex];
    var elem = document.getElementById(elemId);
    elem.parentNode.removeChild(elem);
    container.appendChild(elem);
}

这是一个例子：http://jsfiddle.net/dpHyn/

虽然我认为 真正的 答案是，因为大概您已经拥有一个动态提供专辑列表的服务器，为什么不让服务器在加载元素时正确排序它们数据库（或您正在使用的任何其他数据源）？这将为您省去所有这些麻烦，并且也可以正常使用分页。

​

Answer 2

var lines = $("#products > .line"),
    albums = lines.children().toArray(),
    line = -1;

albums.sort(function(a, b) {
    return a.id.replace("Album", "") - b.id.replace("Album", "");
});

$.each(albums, function(i, el) {
    if (!(i % lines.length))
        line += 1;

    lines.eq(line).append(el);
});

或者没有 jquery

var lines = document.querySelectorAll("#products > .line"),
    line = -1;

[].slice.call(document.querySelectorAll("#products > .line > div"))
    .sort(function(a,b) {
        return a.id.replace("Album", "") - b.id.replace("Album", "");
    })
    .forEach(function(el, i) {
        if (!(i % lines.length))
            line += 1;

        lines[line].appendChild(el);
    });