如何按降序排列Div內容通過圖像名稱？

我想根據他們的圖像名稱按照DESCENDING順序對div進行排序。如何按降序排列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>

來源

2012-10-31 MrSeth

這是一種使用純JavaScript的方式。 Check it out here.

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]; 
}

這個做什麼，它會將所有爲你的形象進入sorted變量的SRC路徑，對其進行排序，然後更新所有新的排序順序圖像的src路徑。

UPDATE

添加的自定義排序功能，以解決@EugeneXa

來源

2012-10-31 23:14:41 Aust

您可以使用排序的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-31 23:11:54 Tariqulazam

這裏唯一的問題是，「2.JPG」最終是不是「10.JPG」大，但我不知道它是否需要用數字或字母 – Evgeny

進行排序真正。如您所見，我們正在比較圖像的src，而不是圖像文件的名稱。代碼可以更新以獲取沒有擴展名的圖像文件名稱並相應地進行比較。 – Tariqulazam

現在你正在談論複雜的正則表達式的東西。如果可以，您應該首先使用前導零將文件重命名爲可排序的格式。誠然，'2.jpg'應該始終在'10.jpg'之後出現，就像'b'總是在'a'之後出現的方式一樣 - 你必須像計算機一樣思考並記住這些是字符串......不是埋在字符串中的整數。 –

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

Fiddle

來源

2012-10-31 23:24:01

如何按降序排列Div內容通過圖像名稱？

回答

相關問題