Dynamically arranging divs using jQuery
I have the following structure:
-
My plugin version - Working Demo
Takes an array and optional id prefix and reorders elements whose ids correspond to the order of (id prefix) + values inside the array. Any values in the array that don't have an element with the corresponding id will be ignored, and any child elements that do not have an id within the array will be removed.
(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);
Code from the demo
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>
讨论(0)
-
Here's a jQuery-less solution:
function appendNodesById(parent, ids) {
for(var i = 0, len = ids.length; i < len; ++i)
parent.appendChild(document.getElementById(ids[i]));
}
appendNodesById(document.getElementById('container'),
['someid4', 'someid2', 'someid3', 'someid1']);
讨论(0)
-
[Edit], This is tested and works:
var order = [3,2,1,4];
var container = $("#container");
var children = container.children();
container.empty();
for (var i = 0; i < order.length; i++){
container.append(children[order[i]-1])
}
The i-1 is necessary since your ordering starts at 1 but arrays are indexed from 0.
Thanks to J-P and Russ Cam for making me look at it again.
讨论(0)
-
If you have all the content in the array then remove all the content from the wrapper div container in your code. then start adding the received divs one by one:
var v = $(ar[0]).append(ar[1]).append(ar[2]);
$("#container").html(v);
If this does not works then look into this thread that discusses about positioning elements relative to other elements.
讨论(0)
加载中...
- 热议问题