Javascript 将div排序到其他div中

可能重复：

嗯，我真的很难解决这个问题，事实上直到现在我都没有成功，我正在尝试按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那样幸运。 这是我的页面：

有什么建议吗？ 提前谢谢

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);
    });

---

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

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);
}

下面是一个例子：

虽然我认为真正的答案是，既然您已经有了一个服务器，它已经动态地提供了相册列表，为什么不让服务器在从数据库或您正在使用的任何其他数据源加载元素时正确地排序元素呢？这将为您省去所有这些麻烦，并且可以正确地使用分页

---

​

将value属性设置为div并为其指定数字。排序会更容易。这正是事实，产品是动态加载的，但服务器不包含按属性排序。在本例中，Album是一个属性，尽管服务器包含名称和价格的排序选项。我用液体做设计：但我不能实现任何新的东西，因为我用的是一个预先制作好的系统。我喜欢它。比我的简单。没有理由发布它。非常感谢，但它将分别适用于每个页面，对吗？它不适用于所有页面中的所有产品，对吗？实际上，是否有任何方法可以对所有页面的所有产品进行排序，例如，如果第7页中有一个产品的专辑名为Aaaa，那么它应该出现在第1页。