jQuery - count divs and put arrange in columns

Is there a way to count the number of div's with class my_div, divide this number by 4 and then arrange div'd in columns using jQuery?

I want to be able to take the code below BEFORE and convert to AFTER using jQuery.

Thanks in advance for your feedback.

BEFORE
 
<html>
<head>
<style type="text/css">

#my_div_container {
	width: 800px;
	margin: 0 auto;
	height: auto;
	min-height: 40px;
	font-size: 12px;
	line-height: 20px;
	color: #000;
	background-color: #CCC;

}

.column{
  float:left;
  width: 160px;
  height: auto;
}

.my_div {
	width: 160px;
	clear:left;
	margin: 0px;
	padding:3px;
	background-color: #999;
	float: left;
	height: 20px;	
	text-indent: 10px;
}



</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">
<div class="my_div">Contents 1</div>
<div class="my_div">Contents 2</div>
<div class="my_div">Contents 3</div>
<div class="my_div">Contents 4</div>
<div class="my_div">Contents 5</div>
<div class="my_div">Contents 6</div>
<div class="my_div">Contents 7</div>
<div class="my_div">Contents 8</div>
<div class="my_div">Contents 9</div>
<div class="my_div">Contents 10</div>
<div class="my_div">Contents 11</div>
<div class="my_div">Contents 12</div>
<div class="my_div">Contents 13</div>
</div>
</body>
</html>

Open in new window



AFTER
 
<html>
<head>
<style type="text/css">

#my_div_container {
	width: 800px;
	margin: 0 auto;
	height: auto;
	min-height: 40px;
	font-size: 12px;
	line-height: 20px;
	color: #000;
	background-color: #CCC;

}

.column{
  float:left;
  width: 160px;
  height: auto;
}

.my_div {
	width: 160px;
	clear:left;
	margin: 0px;
	padding:3px;
	background-color: #999;
	float: left;
	height: 20px;	
	text-indent: 10px;
}



</style>
<title>Untitled Document</title>
</head>
<body>
<div id="my_div_container">

<div class="column">
<div class="my_div">Contents 1</div>
<div class="my_div">Contents 2</div>
<div class="my_div">Contents 3</div>
</div>

<div class="column">
<div class="my_div">Contents 4</div>
<div class="my_div">Contents 5</div>
<div class="my_div">Contents 6</div>
</div>

<div class="column">
<div class="my_div">Contents 7</div>
<div class="my_div">Contents 8</div>
<div class="my_div">Contents 9</div>
</div>

<div class="column">
<div class="my_div">Contents 10</div>
<div class="my_div">Contents 11</div>
<div class="my_div">Contents 12</div>
</div>

<div class="column">
<div class="my_div">Contents 13</div>

</div>


</div>
</body>
</html>

Open in new window

- after
sabecsAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

chaitu chaituCommented:
you can find count like this.
$(".my_div").length
0
sabecsAuthor Commented:
Thanks chaituu for your help, how do I insert <div class="column"> after every 3 div's?


<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
            var no_of_cols = (Math.ceil($(".my_div").length/4));
            var max_divs_per_col = (Math.round($(".my_div").length/4));
});
</script>
0
chaitu chaituCommented:
0
leakim971PluritechnicianCommented:
The following do the things : http://jsfiddle.net/25xzN/
while($("#my_div_container>div.my_div").length>0) {
    var divs = $("#my_div_container>div.my_div:lt(3)");
    $("#my_div_container").append( $("<div class='column' />").append(divs) );
}

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.