Question

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

我想根据他们的图像名称通过DESCENDING顺序对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>

然而我在这里使用此代码来填充“content”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
   });
 }
});

Answer 2

我看了一下你的网站。

Point No1。

在文档ready事件中包装javascript。（谷歌并找到原因）

第2点。

如果您不想要砖石，请将其评论为

/*$(function() {
  $(window).load(function(){
    $('#content').masonry();
  });*/

不喜欢

//$(function() {
  $(window).load(function(){
    $('#content').masonry();
  });

排序代码可以

<script>
$(document).ready(function() {
    $('.fancybox').fancybox();
    $.ajax({
        url: "user-uploads-thumbnails",
        success: function(data){
            var imageNames = [];
            $(data).find("a:contains(.jpg)").each(function(){
                // store each image name into array
                imageNames.push($(this).attr("href"));
               });
            //imagenames array is ~ 
            //['1351732586.jpg' ,'1351732519.jpg' ,'1351732583.jpg' ,'1351732473.jpg' ....]
            var sortedImageNames = imageNames.sort();
            //sortedImageNames array is ~ 
            //["1351732473.jpg", "1351732519.jpg", "1351732583.jpg", "1351732586.jpg" ....]
            //In for loop we take from last image to first Image for DESC order
            for(var i = sortedImageNames.length; i-- > 0;) {
                    var linkImage = 'user-uploads/' + sortedImageNames[i];
                    var thumbnailImage = 'user-uploads-thumbnails/' + sortedImageNames[i];
                    var item = '<p><a class="fancybox" href="' 
                        + linkImage 
                        + '" data-fancybox-group="gallery"><img src="' 
                        + thumbnailImage 
                        + '"></a></p>';
                    $(item).appendTo('#content');
                }
            //Apply fancybox to these Elements
            $('.fancybox').fancybox();
            }
        });
    });
</script>

未经测试。

Answer 3

每次通过ajax加载#content div后，您需要对容器进行排序。只需添加在完成ajax成功回调中的所有内容附加后，sort(container);。

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

sort(container); // sort after loading the content

 }
});
</script>

在降序中按图像名称排序Div？

3 个答案: