如何计算其父元素第一行的元素数量

我的问题是，有没有一种方法可能在JavaScript中我可以确定多少个子元素将适合父元素的第一行？ 然后，我会将其乘以固定数量的行，并一次查询多少行。

为了更好地理解发生了什么，如果我查询20个项目并且页面大小使得每行可以容纳6个元素，那么我将在最后一行留下两个空格。 我想查询足够的，以便最后一行没有空单元格。

该页面位于： http ： //www.spacerock.com/dvds.php

我正在试图找出一种动态地执行此操作的极端方法，并按页面大小按下数字。

Answer 1

好的，我想我现在更了解你。 试试这个代码吧。 按原样运行并观察计数，然后进入全屏模式并再次运行。

 $(document).ready(function(){ function countFirstRowItems(parentSelector, childSelector){ var count = 0, theTop = undefined; $(parentSelector + " > " + childSelector).each(function(){ var thisTop = $(this).offset().top; if(theTop === undefined){ theTop = thisTop; } if(thisTop != theTop){ return false; } count++; }); return count; } $('#btnCount').click(function(){ $('#spnCount').html( countFirstRowItems('.outer', '.item') ); }); $('#spnCount').html( countFirstRowItems('.outer', '.item') ); }); 

 .outer{ padding:.5em; margin:.5em; box-shadow:inset 0px 0px 3px #aaa; } .item{ margin:.5em; height:150px; width:100px; border:solid 1px #ddd; float:left; background-color:#fdfafa; } .clearfix{ clear:both; } 

  Count items on first row ?