селектора JQuery - значения стиля

Question

я получил серию дивы вроде этого:

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

И я хотел бы сделать селектор, который получил бы мне дивы с дополнением большим затем 20px.

Можно ли использовать только jquery? Или мне нужно изменить мое дерево html и добавить некоторый атрибут, который бы отличал эти элементы с высоким значением дополнения?

Answer 1

Вы можете использовать filter с пользовательской функции.

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

P.S. Я не уверен, что .css('padding') > 20 вернется, я думаю, мне нужно, чтобы проверить это ....

Answer 2

Вы можете использовать filter.

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

alert (elems.length); 

или с помощью каждого вы можете сделать что-то вроде этого

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

    alert (elems.length); 
}); 

Answer 3

Вы можете использовать filter()

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

или вы можете создать свой собственный селектор:

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

Answer 4

Вы можете использовать селектор $('.message'), а затем loop через свои элементы, нахожу один с .css padding-left, установленный на все, что вы хотите.

Второе решение включает использование custom selectors.

Вы можете изменить этот код, который я взял из моего блога:

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

Использование:

$('div:redOrBlue')