jQuery 选择器 - 样式值答案

【问题标题】：jQuery selector - style valuesjQuery 选择器 - 样式值
【发布时间】：2017-08-28 00:04:05
【问题描述】：

我得到了一系列这样的 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>

我想制作一个选择器，让我得到填充大于 20 像素的 div。

仅使用 jquery 可以吗？或者我应该修改我的 html 树并添加一些属性来区分那些具有高填充值的元素？

【问题讨论】：

标签： javascript jquery css-selectors

【解决方案1】：

您可以将filter 与自定义函数一起使用。

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

附言我不确定.css('padding') > 20 会返回什么，我想我需要对其进行测试......

【讨论】：

$(this).css('padding-left') > 20; 将返回 false，因为它不是数字。
所以parseInt('20px') 将完成这项工作。但是，如果您想要任何一侧的刨丝器填充怎么办？换句话说，.css('padding') 会返回什么？它可以完成这项工作，还是您也应该在函数中包含这个逻辑？这就是我所说的，我需要看看它。
如果您查看文档，您会发现.css() 不支持速记属性。但是，如果在 div 元素上设置了速记属性 padding，则访问 .css('padding-left') 无论如何都会返回正确的计算样式。

【解决方案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 );
});

【讨论】：

【解决方案3】：

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

第二种解决方案，涉及使用custom selectors。

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

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

用法：

$('div:redOrBlue')

【讨论】：

【解决方案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");

【讨论】：