0

重複の可能性:
jQueryを使用してIDに従って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>

しかし、もう1つ問題があります.すべての製品がリストされており、複数のページがあります.実際にそれらを追跡し、並べ替えられた文字列の配列を作成できましたが、DIVで同じ運がありませんでした. これは私のページです: http://biscoitofino.jumpseller.com/catalogo

助言がありますか？前もって感謝します。

4

2 に答える 2

4

少なくとも単一のページのコンテキスト内では、次のような方法でそれを行う必要があります。

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/

本当の答えは、アルバムのリストをすでに動的に提供しているサーバーを持っていると思われるので、サーバーがデータベースから要素をロードするときに要素を適切にソートしない理由です (または使用している他のデータソース)? これにより、この問題がすべて解決され、ページネーションも適切に機能します。

</p>

于 2012-09-21T02:20:50.973 に答える
3 
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);
    });
于 2012-09-21T02:20:08.890 に答える