如何按字母顺序排列部分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中。