1

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

从此改变：

<div id="sort-this-div">
<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="sort-this-div">
<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>
4

3 回答 3

1

这是一种使用纯 JavaScript 的方法。在这里查看。

var sort = document.getElementById('sort-this-div');
var imgs = sort.getElementsByTagName('img');

var i, img, sorted = [];
for(i = 0; (img = imgs[i]); i++){
    sorted.push(img.getAttribute('src'));
}
sorted = sorted.sort(function(a, b){
    return +b.match(/\/(\d+?)\.jpg/)[1] - +a.match(/\/(\d+?)\.jpg/)[1];
});

for(i = 0; (img = imgs[i]); i++){
    img.src = sorted[i];
}​

这是做什么的，它将图像的所有 src 路径复制到sorted变量中，对它们进行排序，然后使用新的排序顺序更新图像的所有 src 路径。

更新

添加自定义排序功能以解决@EugeneXa 提出的问题

于 2012-10-31T23:14:41.693 回答
1

HTML：

<div id="sort-this-div">
    <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>​

JavaScript：

/* as option:
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);
    }
}*/

function sort(container) {
    var images = [],
        imageSources = [],
        paragraphs = container.getElementsByTagName('p');        
    for(var i = paragraphs.length; i-- > 0;) {
        var img = paragraphs[i].getElementsByTagName('img')[0],
            src = img.getAttribute('src');
        images.push(img);
        imageSources.push(src);
    }
    imageSources = imageSources.sort();
    console.log(imageSources);
    for(var i = imageSources.length; i-- > 0;) {
        images[i].src = imageSources[i];
    }
}

var container = document.getElementById('sort-this-div');
sort(container);

​</p>

小提琴

于 2012-10-31T23:24:01.740 回答
0

您可以使用 jquery 的排序插件http://qd9.co.uk/projects/jQuery-Plugins/sort/demo.html

小提琴 - http://jsfiddle.net/tariqulazam/PuUn5/

$(document).ready(function(){
    $("p img").sort(function(a, b){
        return $(a).attr('src') > $(b).attr('src') ? -1 : 1;
    });
});​
于 2012-10-31T23:11:54.597 回答