Count number of rows inside a div element

Question

As shown in the image below, I have several div inside a div (outer div). I need to count the number of rows the outer div have. In this example the row count is 5.

Note:The inner div is floated left and its content is created dynamically.

Does anyone has any ideas? enter image description here

Have you use a plugin to create that layout, such as Masonry? — Rory McCrossan, Apr 22 '14 at 09:33
Lookin for something like: `$('#outerDiv .leftFloatingDivs').length` ? — Homungus, Apr 22 '14 at 09:35
http://stackoverflow.com/questions/13071278/gwt-count-the-number-of-rows-in-a-div Hope this helps ! — user3545339, Apr 22 '14 at 09:37
@Homungus, I am using isotopes.js, I will have no idea which div will be placed in the left side... — Pinoy2015, Apr 22 '14 at 09:40

SW4 · Accepted Answer · 2014-04-22T09:56:10.703

1

Perhaps something along the lines of:

Demo Fiddle

var minLeft = null, rows = 0;
$('div div').each(function () {
    var left = $(this).offset().left;
    if (left <= minLeft || minLeft==null) {        
        rows++;
        minLeft=left;
    }
});
console.log(rows);

edited Apr 22 '14 at 09:56

answered Apr 22 '14 at 09:37

SW4

69,876
20
132
137

score 1 · Answer 2 · answered Apr 22 '14 at 09:39

1

Try with something like this:

var parentX = $('#containerDiv').position().left;
var rows = 0;

$('#containerDiv div').each(function(){
  if( $(this).position().left == parentX ){
    ++rows;
  }
});

alert('Num of rows: ' + rows );

answered Apr 22 '14 at 09:39

TheGr8_Nik

3,080
4
18
33

Count number of rows inside a div element

2 Answers2

Demo Fiddle