定位内联样式与 jquery 不起作用

Targeting inline style with jquery not working

本文关键字：jquery 不起作用 样式 定位      更新时间：2023-09-26

这是输出 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();
    }
});

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

你不能将 css() -function 应用于 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()函数与属性包含选择器[name*="value"]选择器一起使用也可以，但是我发现这在过去很难正确。

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

相关文章：