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

我需要按字母顺序订购画廊中的每一件物品。每个项目将有一个图像和标题

图库的代码：

<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的简单解决方案

---

顺便说一句，我的英语很抱歉。

在你的HTML之后添加以下内容（假设你有jQuery，在你的新链接中显示你有jQuery）：

---

这比使用JavaScript排序要有效得多，特别是考虑到您要排序的值在HTML中嵌套得很深。

以下是我在您链接的站点上测试的一个版本：

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
    });
});

var articles=$（'article.grid_24'）；
每一篇文章（（第十条，el）=>{
var art=$（el）；
var-box=art.find（'.wrapper.col-3'）；//获取包含图像和名称的框
removeClass（'spating-3'）；//去掉这个，因为我们不知道任何给定的框在重新调用后是否会有这个
box.detach（）；//删除条目而不丢失其JS属性
box.sort（（a，b）=>{return（$（b）.find（'h5'）.text（）<$（a）.find（'h5'）.text（））？1:-1；}）；//按h5标题中的名称排序
var wrappers=art.find（'.wrapper'）；//获取行
var wrapper_idx=-1；//在第一个元素处，它将增加到索引0
对于每个内容框，每个（（idx，box）=>{//
如果（idx%4==0）wrapper_idx++；//对于每四个内容框，移动到下一行
if（（idx+1）%4）$（box）.addClass（'spating-3'）；//如果不是第四个框，则将其返回给该类
$（box）.appendTo（$（wrappers[wrapper_idx]）；//将内容框添加到当前行中
});
});

编辑：我更改了此选项，使不同的元素仅在各自的

文章

父元素之间排序

---

在加载所有图像后，可以将其作为Javascript块插入。我同意Josh Miller的观点，理想情况下，这种排序实际上是在呈现内容之前完成的，但是如果内容已经显示，上面的代码应该可以工作。

这不能使用html完成，除非它是静态的。。。然后，您可以剪切并粘贴项目，以获得正确的字母排序。如果您想在javascript中实现这一点，就必须使用jQuery，让每个div都有唯一的类，然后对其进行排序。你能澄清这种排序是动态的还是静态的吗？html是如何生成的？正如lifejuggler提到的，您可以自己编辑静态页面的html。如果它是使用服务器端代码生成的，我建议在服务器上进行排序。嗨，che代码是局部的，因为我在页面上有大约50多个图像，如果我想添加图像，我需要将其添加为html代码，但我看到图像按顺序写在代码上。我不想创建php页面或mysql文件来创建数据库。如果你能帮助我，请告诉我！非常感谢。整个在线页面是这样的：@Po1s0n，我很高兴你得到了帮助，但是请注意，你最初的问题与你最后实际要求做的有很大不同。您询问如何对一组包含的数据中的四个项目进行排序，但您真正想要的是有人对一个页面中的50多个项目进行排序，该页面具有一些明显不同的HTML。这里的想法不是让某人100%地为您构建页面，而是帮助您了解如何解决问题。最终，您将获取此代码并复制/粘贴它，但您下次是否学习了如何执行此操作？@Po1s0n好吧，您共享的新链接上的内容与原始问题中的片段非常不同。与只对需要的四个项目进行排序不同，您有50多个重复部分中的项目，就像您在上面发布的一样。我将尝试修改我的答案以匹配您提供的链接，但请注意，HTML与您在此处发布的内容不同。代码相同，我只从代码中删除了其他图像。我在“仅4个图像”页面上尝试了您的代码，但它不起作用。@Po1s0n根据新的要求和新提供的链接，我重写了解决方案。这是一个糟糕的JavaScript使用，应该在数据库级别处理，但这至少应该得到您要求的结果。仍然有效，但存在一些问题，每一行图像（同一行有4个图像）都用类包装器p4列出，但最后一行除外

SELECT title, image
FROM product_table
ORDER BY title ASC

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
    });
});