javascript - 在页面加载jquery时从具有相同类名的多个div获取特定属性值

Question

我有一个类似这样的 HTML 网页。 我想隐藏类 swatch-option 的背景，并在 div 中呈现选项标签。

但我无法获取选项标签。

$(document).ready(function() {
  if ($('div.swatch-option').hasClass('color')) {
    console.log($(this).attr('option-label'));
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="swatch-attribute swatch-layered color" attribute-code="color" attribute-id="93">
  <div class="swatch-attribute-options clearfix">
    <a href="#" aria-label="Black" class="swatch-option-link-layered">
      <div class="swatch-option color " tabindex="-1" option-type="1" option-id="49" option-label="Black" option-tooltip-thumb="" option-tooltip-value="#000000" style="background: #000000 no-repeat center; background-size: initial;"></div>
    </a>
    <a href="#" aria-label="Red" class="swatch-option-link-layered">
      <div class="swatch-option color " tabindex="-1" option-type="1" option-id="50" option-label="Red" option-tooltip-thumb="" option-tooltip-value="Red" style="background: Red no-repeat center; background-size: initial;"></div>
    </a>
  </div>
</div>

这是我正在尝试的代码。但它显示未定义。页面上有更多带有 class = "swatch-attribute swatch-layered" 的 div，同样还有更多带有 swatch-attribute-options 和 类的 div样本选项。所以有点复杂。任何人都可以帮助我获得值(value)，以便我禁用背景并将值(value)等于选项标签

Answer 1

尝试:

$('div.swatch-option.color').each(function() {
  console.log($(this).attr('option-label'));
});

通过上面的代码片段，您将获得所有具有 .swatch-option 和 .color 类的 div - 然后遍历它们并使用 $ 访问它们的属性(这个)。