Question

6

Dynamically arranging divs using jQuery

rated 0 times [ 7] [ 1] / answers: 1 / hits: 22440 / 15 Years ago, sat, may 30, 2009, 12:00:00

I have the following structure:

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

Now someid is acually a unique id for that div. Now i receive an array which has a different order say someid 3,2,1,4, then how do i move these divs around to match the new order using jQuery?

Thankyou very much for your time.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

kaya

Add To Favorites

Follow

Total Points: 531

Total Questions: 107

Total Answers: 100

Location: United States Minor Outlying Island

Member since Sat, May 28, 2022

2 Years ago

kaya questions

1 Next.js middleware Module not found: Can't resolve 'fs'

Mon, Feb 14, 22, 00:00, 2 Years ago

1 how to stop multiple re-renders from doing multiple api calls useEffect?

Thu, Jul 1, 21, 00:00, 3 Years ago

1 Keep getting Unable to resolve module in react native

Fri, Jun 18, 21, 00:00, 3 Years ago

1 Start & Stop lottie player/animation with buttons

Tue, Jun 1, 21, 00:00, 3 Years ago

1 Fetch data from local API

Wed, Dec 23, 20, 00:00, 3 Years ago

View All

answered 15 Years ago ammonjesseg · Accepted Answer

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>