javascript - 您可以选择流到下一行的类的所有 div 吗？

Question

所以我有 7 到 12 个样式相同的 div，它们都向左浮动。我正在为流到第二行的所有选择器寻找一个 css 选择器。我很确定这对于标准 css 是不可能的，但我想知道是否有人知道任何 jQuery 或其他可以完成此任务的技巧。非常感谢！

Answer 1

正如您所说的那样，使用 CSS（我知道）无法做到这一点。但是，使用 jQuery 可以很容易地完成它。

一种方法是使用过滤器和偏移量的组合来仅保留顶部偏移量高于其他元素的元素（那些不适合第一行的元素）。

var $elm = $(".yourSelector"); // Use your selector here
var $secondRowElms = $elm.filter(function () {
   // Compare each item with the first item, to see if it has higher offset
   return ($elm.first().offset().top < $(this).offset().top);        
});

这里也是一个演示：http: //jsfiddle.net/8ppJP/1/

Answer 2

var $divs = $('.container .sub');

var arrOffsetTops = [];

$divs.each(function(index,element){
   arrOffsetTops[index]=element.position().top;
   arrOffsetTops[index].newLine = (index==0 ? true : false);
   if(index > 0) {
     if(arrOffsetTops[index] > arrOffsetTops[index-1]) {
        // it's on another line
        arrOffsetTops[index].newLine = true;
     }
  }
});

然后，您可以使用索引循环遍历数组并检查 .newLine == true 以执行您需要对 div 执行的任何操作。

更新：

如何使用它的一个例子：

var divCount = $divs.length;
for(var i=0; i<divCount; i++) {
 if(true == arrOffsetTops[ i ].newLine) {
  $divs.eq( i ).addClass('newline-marker');
 }
}

.newline-marker {
 -webkit-box-shadow:0 0 10px black;
 -khtml-box-shadow:0 0 10px black;
 -moz-box-shadow:0 0 10px black;
 -o-box-shadow:0 0 10px black;
 -ms-filter: "progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=0, Color='#000000')";
 filter: progid:DXImageTransform.Microsoft.Shadow(Strength=2, Direction=0, Color='#000000');
 box-shadow:0 0 10px black;
 zoom:1;
}

Answer 3

试试这个：

$('.divs:not(:first)').filter(function(){
   return $(this).position().top - $(this).height() == 0
}).nextAll().andSelf().addClass('next')

演示