如何按降序排列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内容通过图像名称？

回答

相关问题