0

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

我想根据图像名称按 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>

但是，我在这里使用此代码来填充“内容”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>

下面的这个脚本仅在我将 url 硬编码到“内容”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>
4

3 回答 3

1

我认为最好确保一旦所有内容都已通过 AJAX 调用加载和附加，就会调用“排序（容器）”。

像这样的东西：

$.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
   });
 }
});
于 2012-11-01T00:38:53.540 回答
1

我看了你的网站。

第 1 点。

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>

这未经测试。

于 2012-11-01T02:54:16.850 回答
0

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

<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>
于 2012-11-01T00:37:19.053 回答