如何按字母顺序对 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

在您的 HTML 之后添加以下内容（假设您有 jQuery，您在新的 link 中似乎这样做了）：

  <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 可以完美解决的问题，而是您的数据库查询（假设有一个）。与其在 client-side 上排序，不如在数据库请求期间进行排序以消除 front-end.

上 re-ordering 的开销更有意义

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 的观点，理想情况下，这种排序实际上会在在呈现内容之前完成，但是如果内容已经显示，上面的代码应该可以工作。

如何按字母顺序对 HTML 页面的一部分（图像和文本）进行排序

How to sort alphabetically part of the HTML page (images and text)

html

javascript

alphabetical