jQuery selector - style values

Question

I got a series of divs like this:

<div class="message" style="padding-left: 0px;">...</div>
<div class="message" style="padding-left: 20px;">...</div>
<div class="message" style="padding-left: 20px;">...</div>
<div class="message" style="padding-left: 40px;">...</div>
<div class="message" style="padding-left: 20px;">...</div>

And I would like to make a selector that would get me the divs with padding greater then 20px.

Would it be possible with just using jquery? Or I should modify my html tree and add some attribute that would distinguish those elemenents with high padding value?

Answer 1

You can use filter for this.

var elems = $('div.message').filter(function (){
               return parseInt($(this).css("padding-left"),10) > 20;
            });

alert ( elems.length );

or using each you can do something like this

$(function(){
    var elems = new Array();
    $("div.message").each(function(){
        if(parseInt($(this).css("paddingLeft"), 10) > 20 )
        {
            elems.push($(this));
        }           
    });

    alert ( elems.length );
});

Answer 2

You can use a filter with a custom function.

$('div.message').filter(function(){
     return parseInt($(this).css('padding-left')) > 20;
});

p.s. I don't sure what .css('padding') > 20 will return, I'm guess I need to test it....

Answer 3

You could use filter()

var col = $('div').filter(function ()
{
    return parseInt($(this).css("padding-left")) > 20;
});

or you could create your own selector:

$.expr[':'].myselector = function(obj, index, meta, stack){
   return parseInt($(obj).css("padding-left")) > 20;
};
var col = $("div:myselector");

Answer 4

You could use $('.message') selector, and then loop through your elements finding the one with .css padding-left set to anything you want.

Second solution, involves usage of custom selectors.

You can modify this code I took from my blog:

$.extend($.expr[':'], {
    redOrBlue: function(o) {
        return ($(o).css("color") == "red") 
               || ($(o).css("color") == "blue");
    }
});

Usage:

$('div:redOrBlue')