按文件名排序图像

1

看到这个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

来源

2012-03-12 16:49:51 Starx

+0

有没有办法将它放入数组中？ – user1259527 2012-03-12 16:58:19

+0

@ user1259527，数组是定义顺序。这是因为你必须以某种方式定义该数组，无论使用哪种预格式，无论哪种数组都将是最终类型。所以，坚持这一点。 – Starx 2012-03-12 17:15:08

+0

@ user1259527，我更新了一个适合你的案例。您现在应该可以对其进行必要的更改。 – Starx 2012-03-12 17:15:47

-1

刚刚重新安排你在你希望它们的流动顺序码。例如：

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

来源

2012-03-12 16:58:34 wizlog

+1

是的，但我想要一个按钮来做到这一点，我想添加一个刷新按钮，但这不是真的应该这样做 – user1259527 2012-03-12 17:05:33

+1

至少，内联JavaScript应该被淘汰。 – Sparky 2012-03-12 17:09:33

+0

@ Sparky672道歉，我需要研究和使用试验和错误来得到我得到的答案。我不知道内联。感谢您编辑我的答案。 – wizlog 2012-03-12 19:05:42

0

这里是一个快速和肮脏的方式，通过简单地使用appendTo()重新排列img s到做到这一点：

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()。

来源

2012-03-12 17:09:11

按文件名排序图像

回答

相关问题