Php 按图像名称降序排序Div？_Php_Javascript

Php 按图像名称降序排序Div？

php javascript

Php 按图像名称降序排序Div？,php,javascript,Php,Javascript,*请仔细阅读-我先使用示例编码-然后是我的实际代码，以便更具描述性* <script> function sort(container) { var images = [], paragraphs = container.getElementsByTagName('p'); while(!!paragraphs.length) { var p = paragraphs[0]; images.push(p.

*请仔细阅读-我先使用示例编码-然后是我的实际代码，以便更具描述性*

<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>

我想根据一个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>


$.ajax({
url:“用户上传缩略图”，
成功：功能（数据）{
$（数据）.find（“a:contains（.jpg）”）.each（函数（）{
//将循环通过
var images='用户上传缩略图/'+$（this.attr（“href”）；
var linkimage='user uploads/'+$（this.attr（“href”）；
//备份$（''）。附加到（'#内容'）；
$（“”）。附录（“#内容”）；
});
}
});

只有当我将URL硬编码到“content”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>


函数排序（容器）{
var images=[]，
段落=container.getElementsByTagName（'p'）；
而（！！段落长度）{
var p=段落[0]；
push（p.getElementsByTagName（'img'）[0].getAttribute（'src'）；
容器移除儿童（p）；
}
images=images.sort（）；
控制台日志（图像）；
对于（var i=images.length；i-->0；）{
var p=document.createElement（'p'），
img=document.createElement（'img'）；
img.src=图像[i]；
p、 儿童（img）；
子容器（p）；
}
}
var container=document.getElementById（'content'）；
分拣（集装箱）；

每次通过ajax加载#content 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');
 });

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

 }
});
</script> 


$.ajax({
url:“用户上传缩略图”，
成功：功能（数据）{
$（数据）.find（“a:contains（.jpg）”）.each（函数（）{
//将循环通过
var images='用户上传缩略图/'+$（this.attr（“href”）；
var linkimage='user uploads/'+$（this.attr（“href”）；
//备份$（''）。附加到（'#内容'）；
$（“”）。附录（“#内容”）；
});
排序（容器）；//加载内容后排序
}
});
我认为最好确保在通过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
   });
 }
});

$.ajax({
url:“用户上传缩略图”，
成功：功能（数据）{
var count=$（data）.find（“a:contains（.jpg）”）.length//存储图像总数
$（数据）.find（“a:contains（.jpg）”）.each（函数（）{
//将循环通过
var images='用户上传缩略图/'+$（this.attr（“href”）；
var linkimage='user uploads/'+$（this.attr（“href”）；
//备份$（''）。附加到（'#内容'）；
$（“”）。附录（“#内容”）；
if（！--count）sort（container）；//加载所有内容后调用sort
});
}
});
我查看了您的网站
第1点。
<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>

将javascript包装到文档ready
事件中。（谷歌和查找原因）
第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>


$（文档）.ready（函数（）{
$（'.fancybox'）.fancybox（）；
$.ajax({
url:“用户上传缩略图”，
成功：功能（数据）{
var-imageNames=[]；
$（数据）.find（“a:contains（.jpg）”）.each（函数（）{
//将每个图像名称存储到数组中
imageNames.push（$（this.attr（“href”））；
});
//imagenames数组为~
//['1351732586.jpg'、'1351732519.jpg'、'1351732583.jpg'、'1351732473.jpg'…]
var sortedImageNames=imageNames.sort（）；
//sortedImageNames数组为~
//[“1351732473.jpg”、“1351732519.jpg”、“1351732583.jpg”、“1351732586.jpg”…]
//在for循环中，我们从最后一个图像到第一个图像进行描述
对于（变量i=sortedImageNames.length；i-->0；）{
var linkImage='user uploads/'+sortedImageNames[i]；
var thumbnailImage='user uploads thumbnails/'+sortedImageNames[i]；
变量项=''；
$（项目）.appendTo（“#content”）；
}
//将fancybox应用于这些元素
$（'.fancybox'）.fancybox（）；
}
});
});

这没有经过测试。
用户通过ajax
上传缩略图时返回的数据的格式是什么
，如果他使用旧的排序功能，他将在最终结果中丢失
。排序功能也需要更新，以包括
@sabithpocker旧的排序功能是什么意思？更新后的排序功能在哪里？旧的排序功能是您的“下面”代码函数排序（容器）{
.Varinder建议您在追加结果后，从成功
调用“上述”代码中调用排序
函数。您应该为链接使用数组，如图像
数组，并跟踪使用该数组的链接。在for循环中，创建“”元素并赋予它那些href
像src
是如何给img
的。最后做一些像a.appendChild（img）
和p.appendChild（a）
的事情。这样你就得到了一个p->a->img
结构。同时给出从服务器返回的数据的结构，以及你现在得到的结果，语法错误，逻辑错误