1

画像名に基づいて降順で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

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 に答える
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 に答える
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 に答える