从页面加载jquery上具有相同类名的多个div获取特定属性值。

Question

我有一个带有HTML的网页，类似这样。我想对类swatch-选项隐藏背景，并在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和swatch-option类类似的还有更多的div。所以这有点复杂。有人能帮我得到这个值吗?这样我就可以禁用背景值，并将值等于选项标签。

Answer 1

试着：

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

使用上面的片段，您将得到类.swatch-option和.color的所有divs然后迭代它们并使用$(this)访问它们的属性。

Answer 2

$(this)在代码中没有上下文，您应该循环遍历div，然后this将引用div：

​

$(document).ready(function() {
  $('div.swatch-option.color').each(function() {
      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>

​

Answer 3

您可以遍历所有具有swatch-option类的color div并检查option-label属性。

​

$(document).ready(function() {
  $('div.swatch-option.color').each(function(){
   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>

​