javascript - 使用 jquery 定位内联样式不起作用

Question

这是输出的 HTML:

<ol id="aw-ln-filter-1-options" style="overflow: hidden; height: 250px;">
  <li style="padding-left:0px">
  </li>
  <li style="padding-left:10px">
  </li>
  <li style="padding-left:20px">
  </li>
  <li style="padding-left:10px">
  </li>
  <li style="padding-left:10px">
  </li>
</ol>

我的 jQuery:

jQuery(function ($) {

if ($('#aw-ln-filter-1-options li').css('padding-left') == '20px')
    {
       $(body).hide();
    }
});

我只是用 body 隐藏作为测试。我在这里做错了什么？

Answer 1

您不能将 css() 函数应用于 jQuery 元素的集合。您必须迭代它们并单独测试每一个:

$('#aw-ln-filter-1-options li').each(
    function(i,e) {
      if ($(e).css('padding-left') == "20px") {
        $(e).css('background', 'red');
      }
    }
);

请参阅此处示例:https://jsbin.com/hekokeqabu/edit?html,js,output

也许将 jQuery 的 filter() 函数与 attribute Contains Selector [name*=”value”] 一起使用选择器也可以，但我发现过去很难做到这一点。

但是，由于不了解您的用例，我建议不要使用内联样式作为任何选择操作的标记。一次重新设计将打破一切。使用 CSS 类。