如何按字母順序排列部分HTML頁面（圖像和文本）

Question

我需要按照字母順序排列圖庫中的每個項目。每個項目都會有一個圖像和標題。

爲畫廊的代碼：

<section id="content"> 
<div class="main"> 
    <div class="container_24"> 
     <div class="padding-1"> 
      <div class="wrapper"> 
       <article class="grid_24"> 
        <h4 class="prev-indent-bot">Piante da interno</h4> 
          <div class="wrapper"> 
           <div class="col-3 spacing-3"> 
            <div class="border"> 
             <a class="lightbox-image" href="images/Interno/Phalaenopsis_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Phalaenopsis_small.jpg" width="224" height="208" alt=""></a> 
            </div> 
            <div class="bg-title"> 
             <div class="box-padding1"> 
              <h5>Phalaenopsis</h5> 
             </div> 
            </div> 
           </div> 
           <div class="col-3 spacing-3"> 
            <div class="border"> 
             <a class="lightbox-image" href="images/Interno/Capelvenere_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Capelvenere_small.jpg" width="224" height="208" alt=""></a> 
            </div> 
            <div class="bg-title"> 
             <div class="box-padding1"> 
              <h5>Capelvenere</h5> 
             </div> 
            </div> 
           </div> 
           <div class="col-3 spacing-3"> 
            <div class="border"> 
             <a class="lightbox-image" href="images/Interno/Kalanchoe_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Kalanchoe_small.jpg" width="224" height="208" alt=""></a> 
            </div> 
            <div class="bg-title"> 
             <div class="box-padding1"> 
              <h5>Kalanchoe</h5> 
             </div> 
            </div> 
           </div> 
           <div class="col-3"> 
            <div class="border"> 
             <a class="lightbox-image" href="images/Interno/Nertera_big.jpg" data-gal="prettyPhoto[gallery2]"><img src="images/Interno/Nertera_small.jpg" width="224" height="208" alt=""></a> 
            </div> 
            <div class="bg-title"> 
             <div class="box-padding1"> 
              <h5>Nertera</h5> 
             </div> 
            </div> 
           </div> 
          </div> 
         </article> 
        </div> 
       </div> 
      </div> 
     </div> 
    </section> 

是否有使用JavaScript或HTML一個簡單的解決方案？

P.S.對不起我的英語不好。

Answer 1

下面是我在網站上測試版本你鏈接：

var articles = $('article.grid_24'); 
articles.each((art_idx, el)=>{ 
    var art = $(el); 
    var boxes = art.find('.wrapper .col-3'); //Get the boxes that have the image and name 

    boxes.removeClass('spacing-3'); //Trim out this, since we don't know if any given box will have this after resorting 
    boxes.detach(); //Remove the entries without losing their JS attributes 
    boxes.sort((a,b)=>{return ($(b).find('h5').text() < $(a).find('h5').text())?1:-1;}); //Sort by the name in the h5 title 

    var wrappers = art.find('.wrapper'); //Get the rows 
    var wrapper_idx = -1; //At the very first element, this will be incremented to index 0 
    boxes.each((idx, box)=>{ //For each content box 
     if(idx % 4 === 0) wrapper_idx++; //For each fourth content box, move to the next row 
     if((idx+1) % 4) $(box).addClass('spacing-3'); //If it's not the fourth box, give it back this class 
     $(box).appendTo($(wrappers[wrapper_idx])); //Add the content box into the current row 
    }); 
}); 

編輯：我已經改變了這種只保留各自article父母之間排序的不同元素。

在所有圖像加載後，可以將其作爲Javascript塊插入。我同意喬希米勒的觀點，理想情況下，這種排序實際上是在之前完成，但是如果內容已經顯示，上面的代碼應該可以工作。

Answer 2

添加以下後您的HTML（假設你有jQuery的，它出現在您新的鏈接做）：

<script> 
    // Create a sorting function 
    function sortem(a, b){ 
    var aName = a.title.toLowerCase(); 
    var bName = b.title.toLowerCase(); 
    return ((aName < bName) ? -1 : ((aName > bName) ? 1 : 0)); 
    } 

    // Perform content sort 
    function sortContent() { 
    var divArr = $(".wrapper.p4 > .col-3") 
    var content = []; 

    // Clear your content 
    $('.wrapper.p4').remove(); 

    // Put content into an easily managed array 
    divArr.each(function(idx,el){ 
     content.push({ 
     title: $(el).find('h5').text(), 
     html: $(el) 
     }); 
    }); 

    // Call the sorting function 
    content.sort(sortem); 

    // Re-render the content 
    grid = $("<div></div>"); 
    for(var i=0;i<content.length;i++){ 

     if((i+1)%4===0){ 
     h = content[i].html.removeClass('spacing-3'); 
     }else{ 
     h = content[i].html.addClass('spacing-3'); 
     } 

     if(i%4===0){ 
     grid.append("<div class='wrapper p4'></div>"); 
     } 
     grid.find(".wrapper.p4").last().append(h); 
    } 

    $('.wrapper article.grid_24 .box-2').after(grid); 
    } 

    $(document).ready(function(){ 
    sortContent(); 
    }); 
    </script> 

我想補充一點，這不是理想解決的問題通過JavaScript，而是通過你的數據庫查詢（假設有一個）。與在客戶端進行排序相比，在數據庫請求期間進行排序更有意義，以消除前端重新排序的開銷。

SELECT title, image 
FROM product_table 
ORDER BY title ASC 

這比用JavaScript排序更有效 - 特別是考慮到要排序的值深深地嵌套在HTML中。