Question

我有一系列像这样的div：

<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的div。

只使用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

您可以使用$('.message')选择器，然后loop通过您的元素找到.css padding-left设置为您想要的任何内容。

第二个解决方案涉及custom selectors的使用。

您可以修改我从博客中获取的代码：

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

用法：

$('div:redOrBlue')

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

jQuery选择器 - 样式值

4 个答案: