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 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 2

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