asked on

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

chaitu chaitu

you can find count like this.
$(".my_div").length

sabecs

ASKER

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>

chaitu chaitu

check this example ;may be this wil help u;

http://stackoverflow.com/questions/1432201/how-to-wrap-every-3-child-divs-with-html-using-jquery

chaitu chaitu

http://stackoverflow.com/questions/3366529/wrap-every-3-divs-in-a-div

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial