php - 按图像名称降序对 Div 进行排序？

Question

*请完整阅读 - 我首先使用示例编码 - 然后我的实际代码更具描述性 *

我想根据图像名称按降序对 div 进行排序。

从此更改:

<div id="content">
<p><img src="image/1.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/4.jpg"/></p>
<p><img src="image/2.jpg"/></p>
</div>

至此

<div id="content">
<p><img src="image/4.jpg"/></p>
<p><img src="image/3.jpg"/></p>
<p><img src="image/2.jpg"/></p>
<p><img src="image/1.jpg"/></p>
</div>

但是我在这里使用此代码来填充“内容”div 中的图像。由于用户每天都会上传图像，因此这些图像路径是使用下面的代码从另一个目录中提取的。该内容 div 需要自行填充。

<script>
$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
     $(data).find("a:contains(.jpg)").each(function(){
        // will loop through 
var images = 'user-uploads-thumbnails/' + $(this).attr("href");
var linkimage = 'user-uploads/' + $(this).attr("href");
 //backup $('<p><a href="' + linkimage + '"><img src="' + images + '"></a></p>').appendTo('#content');
$('<p><a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"><img src="' + images + '"></a></p>').appendTo('#content');
     });
  }
});
</script> 

下面的脚本仅在我将网址硬编码到“内容”div 中时才有效。但是，图像每天都会添加到其他目录中，我需要它来自动填充。当我使用上面的脚本来提取路径时^^它不起作用。

<script>
function sort(container) {
    var images = [],
        paragraphs = container.getElementsByTagName('p');        
    while(!!paragraphs.length) {
        var p = paragraphs[0];
        images.push(p.getElementsByTagName('img')[0].getAttribute('src'));
        container.removeChild(p);
    }
    images = images.sort();
    console.log(images);
    for(var i = images.length; i-- > 0;) {
        var p = document.createElement('p'),
            img = document.createElement('img');
            img.src = images[i];
            p.appendChild(img);
        container.appendChild(p);
    }
}

var container = document.getElementById('content');
sort(container);
</script>

Answer 1

我认为最好确保在通过 AJAX 调用加载并附加所有内容后调用“sort(container)”。

类似这样的事情:

$.ajax({
  url: "user-uploads-thumbnails",
  success: function(data){
  var count = $(data).find("a:contains(.jpg)").length // storing total number of images
  $(data).find("a:contains(.jpg)").each(function(){
    // will loop through 
    var images = 'user-uploads-thumbnails/' + $(this).attr("href");
    var linkimage = 'user-uploads/' + $(this).attr("href");
    //backup $('<p><a href="' + linkimage + '"><img src="' + images + '"></a></p>').appendTo('#content');
    $('<p><a class="fancybox" href="' + linkimage + '" data-fancybox-group="gallery"><img src="' + images + '"></a></p>').appendTo('#content');

    if (!--count) sort(container); // calling sort after everything is loaded
   });
 }
});