Селектор 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>

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

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

Answer 1

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

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

p.s. Я не уверен, что .css('padding') > 20 вернется, наверное, мне нужно это проверить ....

Answer 2

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

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

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

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

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

$('div:redOrBlue')

Answer 3

Для этого вы можете использовать фильтр .

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 4

Вы можете использовать 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");