Как сортировать в алфавитном порядке часть страницы 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 
    }); 
}); 

Edit: Я изменил это, чтобы сохранить различные элементы, упорядоченные только между их соответствующими 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.