• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1047
  • Last Modified:

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
0
sabecs
Asked:
sabecs
  • 3
1 Solution
 
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

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now