我有以下结构：
<div id="container"> <div id="someid1" style="float:right"></div> <div id="someid2" style="float:right"></div> <div id="someid3" style="float:right"></div> <div id="someid4" style="float:right"></div> </div>
现在,有些人对这个div来说是一个独特的id.现在我收到一个有不同顺序的数组,这里有一些3,2,1,4,那么如何使用jQuery来移动这些div来匹配新的顺序呢？
非常感谢你的时间.
解决方法
我的插件版本 –
Working Demo
使用数组和可选的id前缀,并重新排列ids对应于数组内的(id前缀)值的元素.数组中没有具有相应ID的元素的任何值都将被忽略,并且任何没有数组中的id的子元素都将被删除.
(function($) {
$.fn.reOrder = function(array,prefix) {
return this.each(function() {
prefix = prefix || "";
if (array) {
for(var i=0; i < array.length; i++)
array[i] = $('#' + prefix + array[i]);
$(this).empty();
for(var i=0; i < array.length; i++)
$(this).append(array[i]);
}
});
}
})(jQuery);
演示代码
jQuery的
$(function() {
$('#go').click(function() {
var order = $('#order').val() == ""? null: $('#order').val().split(",");
$('#container').reOrder(order,'someid');
});
});
(function($) {
$.fn.reOrder = function(array,prefix) {
return this.each(function() {
prefix = prefix || "";
if (array) {
for(var i=0; i < array.length; i++)
array[i] = $('#' + prefix + array[i]);
$(this).empty();
for(var i=0; i < array.length; i++)
$(this).append(array[i]);
}
});
}
})(jQuery);
HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <title>reOrder Demo</title> <Meta http-equiv="Content-type" content="text/html; charset=utf-8" /> <style type="text/css" media="screen"> body { background-color: #fff; font: 16px Helvetica,Arial; color: #000; } div.style { width: 200px; height: 100px; border: 1px solid #000000; margin: 5px; } </style> </head> <body> <div id="container"> <div id="someid1" class="style" style="background-color:green;">div1</div> <div id="someid2" class="style" style="background-color:blue;">div2</div> <div id="someid3" class="style" style="background-color:red;">div3</div> <div id="someid4" class="style" style="background-color:purple;">div4</div> </div> <p>Pass in a comma separated list of numbers 1-4 to reorder divs</p> <input id="order" type="text" /> <input id="go" type="button" value="Re-Order" /> </body> </html>
