按文件名对图像进行排序
按文件名对图像进行排序
提问于 2012-03-13 00:39:35
我需要帮助安排图像。我有这张表，我希望图像以特定的顺序出现，例如B A G D...(从左到右)。
代码可以在here上找到。
回答 3
Stack Overflow用户
回答已采纳
发布于 2012-03-13 00:49:51
请参阅此answer。这就是你可能会问的问题。
我为您创建了该函数的完美修改
function sorter(selector, order) {
selector.each(function() {
if(order) {
for(var i =0; i < order.length; i++){
$("#sorted").append($(this).children('img[id='+order[i]+']'));
}
}
});
}
sorter($("div"), ['a','c','d']);Check it out
Stack Overflow用户
发布于 2012-03-13 01:09:11
下面是一种简单快捷的方法，只需使用appendTo()重新排列img即可：
var order = ['b', 'a', 'g', 'd', 'h', 'c', 'i', 'f', 'e'];
$('img').parent().each(function(x) {
$('#'+order[x]).appendTo($(this));
});演示：http://jsfiddle.net/jtbowden/HFu7j/
而且，我之前已经说过了，但是你真的应该考虑摆脱你的内联javascript。内联代码已经过时，使得代码维护和调试变得更加困难。在jQuery中使用事件绑定，例如使用.on()。
Stack Overflow用户
发布于 2012-03-13 00:58:35
只需按照您希望的顺序重新排列代码即可。例如：
<img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true"/>
</div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png" ondragstart="drag(event);" id="b" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png" ondragstart="drag(event);" id="c" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png" ondragstart="drag(event);" id="d" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" ondragstart="drag(event);" id="f" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png" ondragstart="drag(event);" id="g" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png" ondragstart="drag(event);" id="h" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png" ondragstart="drag(event);" id="i" draggable="true"/> </div>
</td>
<td>会变成
<img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-B-dg-icon.png" ondragstart="drag(event);" id="b" draggable="true"/>
</div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-A-dg-icon.png" ondragstart="drag(event);" id="a" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-G-dg-icon.png" ondragstart="drag(event);" id="g" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-D-dg-icon.png" ondragstart="drag(event);" id="d" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-F-dg-icon.png" ondragstart="drag(event);" id="f" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-C-dg-icon.png" ondragstart="drag(event);" id="c" draggable="true"/> </div>
</td>
</tr>
<tr>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-H-dg-icon.png" ondragstart="drag(event);" id="h" draggable="true"/> </div>
</td>
<td>
<div ondrop="drop(event);" ondragover="allowDrop(event)"><img src="http://icons.iconarchive.com/icons/hydrattz/multipurpose-alphabet/128/Letter-I-dg-icon.png" ondragstart="drag(event);" id="i" draggable="true"/> </div>
</td>
<td>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/9671128
复制相关文章
相似问题
腾讯云开发者
