Can you select all class divs that flow to the next line?

Question

So, I have 7 to 12 divs of the same style that float on the left. I am looking for a css selector for all those that flow to the second line. I'm sure this is not possible in standard css, but I am wondering if anyone knows jQuery or other tricks that could do this. Thanks a bunch!

Answer 1

As you say yourself, we have no way to do this using CSS (which I know). However, with jQuery, this can be done quite easily.

One way to do this is to use a combination of filter and offset to save only items with a higher top offset than others (those that don't fit on the first line).

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); }); 

Here is a demo: 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 on another line arrOffsetTops[index].newLine = true; } } }); 

Then you can loop through the array with index and check for .newLine == true to do whatever you need to do with the div.

UPDATE:

An example of how you could use this:

 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

try the following:

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

Demo