如何按字母顺序对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的简单解决方案？

对不起我的英语。

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

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中嵌套得很深。