如何按字母順序排序 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 的簡單解決方案？

PS對不起我的英語。

Answer 1

在您的 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 中。

Answer 2

這是我在您鏈接的網站上測試過的一個版本：

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 塊插入。 我同意 Josh Miller 的觀點，理想情況下，這種排序實際上是在呈現內容之前完成的，但是如果內容已經顯示，上面的代碼應該可以工作。