Is it possible to select all the floats on a page using jQuery?

Question

I am trying to select all elements with a CSS-computed style of float: left or float: right. I see attribute selectors available in the JQuery documentation, however I'm interested in CSS properties, not attributes.

Possible options for using such a function could be chosen to display all displays: not a single element on the page.

Answer 1

This should do the trick without hacking the class:

$("*").filter( function() {
    return /^(left|right)$/.test( $(this).css("float") )
})

By the way, jQuery already has a good way to find all the elements display: none:

$(":hidden")

Answer 2

Creating new selectors is fun, so I did this:

Application:

: hasCssAttr (property, value ...)

Property - css,

value - (), ( )

$(':hasCssAttr(float, left)').css('float', 'right');

Luke:

$.expr[':'].hasCssAttr = function(objNode, intStackIndex, arrProperties, arrNodeStack) {
  var arrArguments = arrProperties[3].split(','); 
  var cssPropVal = $(objNode).css(arrArguments[0]); // need for speed
  for (var i = 1 ; i < arrArguments.length ; i++)
    if (cssPropVal == arrArguments[ i ].replace(/^\s+|\s+$/g,""))
        return true;      
  return false;
}

, ol 'css. , , , . , , eval, . . .

.

Answer 3

One idea would be to apply a floating style through CSS, after which you could select the class name and make the show / hide as needed.

 <style>
    .right { float: right; }
    .left { float: left; }
 </style>

 <div class='left'>...</div>
 <div class='right'>...</div>

  $('.left,.right').hide();