有没有办法找项目(数量li
一内标签) ul
其中有它的浮动:设置到左 。 假设我得到了它在视觉上被代表文件夹的负荷li
标签。 由于浮动行为,只要li
不适合单排,他们可以下推给它的行和列look.my问题是
使用jQuery ..等有没有一种方法来确定的数li
的每一行
码
<ul>
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>F</li>
<li>G</li>
<li>H</li>
<li>I</li>
<li>J</li>
</ul>
样式
ul,li{margin:0 0;padding:0 0;}
ul li{display:inline;float:left}
对于我的决议案里的高达˚F使得一排,其余的让另一个像下面。 我想一个jQuery的方式来获得元素的数量(这是6在我的情况),第1行。
A B C D E F
G H I J
上下文
我加入键盘事件用左,右,上导航到每个文件夹(LI),同比下降。 左,右是下一个突出和以前李的那样简单。 顶部和向下键需要去下一行,上面一行。 现在,你会得到它:)
我们可以通过检查LIS的数量与他们的顶部(Y轴)的位置相匹配,他们以前的兄弟姐妹都这样做。
演示: http://jsfiddle.net/KgBpx/1/
更新演示: http://jsfiddle.net/KgBpx/2/
注:重新计算的窗口中完成调整,以及充分论证的逻辑。
码:
function calculateLIsInRow() {
var lisInRow = 0;
$('ul li').each(function() {
if($(this).prev().length > 0) {
if($(this).position().top != $(this).prev().position().top) return false;
lisInRow++;
}
else {
lisInRow++;
}
});
console.log('No: of lis in a row = ' + lisInRow);
}
calculateLIsInRow();
$(window).resize(calculateLIsInRow);
注意
LIS的数量将是相同的所有行除了可能最后如果LIS的总数不是lisInRow的倍数。 LIS最后一排的数量可以很容易地通过做可以看出: $('ul li').length % lisInRow
使用滤波器()使对代码量较小。
function filterByTop(top) {
return function(i) { return $(this).offset().top == top; };
}
var el = $('li:first');
var rowSz = $('li').filter(filterByTop(el.offset().top)).length;
您可以使用下面的函数来得到一个数组,这将有每每一行李项的数目。 如果你想只浮动左立项目,您可以轻松地添加条件。
function computeItemsPerRow() {
var itemsInRows = new Array();
var countLi = $('ul li');
var rowWidth = $('#rowContainer').width(); // TODO: Replace with the proper row container selector.
var curRowWidth = 0;
var itemsInCurRow = 0;
for (var i = 0; i < countLi; i++) {
var itemWidth = $('li:eq(' + i + ')').width();
if (curRowWidth + itemWidth > rowWidth || i == countLi - 1) {
itemsInRows[itemsInRows.length] = itemsInCurRow;
itemsInCurRow = 1;
curRowWidth = itemWidth;
}
else {
itemsInCurRow++;
curRowWidth = curRowWidth + itemWidth;
}
}
return itemsInRows;
}
您可以通过顶部位置做到这一点:
var arr = [];
$('ul li').each(function(i){
arr[i] = $(this).position().top;
});
然后,你算在所得数组匹配的值- 如何计算在Javascript中的矩阵匹配值
试试这个(真的出了它,可能需要一些调试)
var numberPerRow = [];
var offsets = [];
$("li").each(function(){
var thisOffset = $(this).offset().top;
var index = $.inArray(thisOffset, offsets);
if(index >=0){
numberPerRow[index]++;
}else{
offsets.push(thisOffset);
numberPerRow.push(1);
}
});
更新
为了获得在阵列中的最上一行值,你可以用这个东西:
console.log( Math.max.apply(null, numberPerRow) );
var rows = 0;
$('li').each(function() {
var $this = $(this);
var $prev = $this.prev();
if ($prev.length && $this.position().top === $prev.position().top) rows++;
});
console.log(rows);
@techfoobar脚本的一个小更新:
您可以隐藏最后一行时,其项目数是共同的项目计数不同
http://jsfiddle.net/cavico/KgBpx/222/
if(lisInLastRow != lisInRow) {
$('ul li').slice( -lisInLastRow ).hide();
}