其他資料覈實

內部排序的DIV

可能重複：
How to sort divs according to their id using jQuery?其他資料覈實

嗯，我有一個很艱難的時間，試圖解決這一點，我其實沒有sucess到現在爲止，我試圖按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>

distribuited，這應該是我的輸出：

<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

有什麼建議嗎？在此先感謝。

來源

2012-09-21 user1687596

將value屬性設置爲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); 
    });

來源

2012-09-21 02:20:08

我喜歡它。比我的簡單。沒有理由發佈。 – banzomaikaka

非常感謝，但它會分開工作，對嗎？它不適用於所有頁面中的所有產品，對嗎？實際上，有沒有辦法對所有頁面的所有產品進行排序，例如，如果第7頁中有一個產品的專輯名稱爲「Aaaa」，則應該進入第1頁。 – user1687596

像這樣的東西應該這樣做，至少在一個頁面的上下文中：

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/

雖然我認爲真正的答案是，sinc大概你已經有了一個服務器，它已經動態地提供了相冊列表，爲什麼不在服務器上從數據庫中加載它們（或者你正在使用的任何其他數據源）來正確地對它們進行排序呢？這樣可以爲你節省所有這些麻煩，並且還可以和分頁一起正常工作。

來源

2012-09-21 02:20:50 aroth

就是這樣，產品是雖然服務器包含名稱和價格的排序選項，但動態加載但服務器不包含按屬性排序（相冊是本例中的屬性）。我使用Liquid作爲desigenrs：https://github.com/Shopify/liquid/wiki/Liquid-for-Designers，但是我無法實現任何新功能，因爲我正在使用預製系統。 – user1687596

其他資料覈實

回答

相關問題