Question

我有一个带有HTML之类的网页。我想隐藏swatch-option类的背景，并在div中渲染option-label。

但是我无法获得选项标签。

$(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的div-然后对其进行迭代并使用$(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>

Answer 4

如果您还想要其他条件，请仅使用此答案。

我已经使用.each函数来查找所有div.swatch-option并使用if()条件，我只考虑了具有类.color的div，如果没有的话想要它，您可以删除它。

$(document).ready(function() {
  $('div.swatch-option').each(function() {
    if ($(this).hasClass('color')) {
    // Added this if() condition considering there are other div's which don't have the class `color`
      console.log($(this).attr('option-label'));

    }else{
       //the think you want with other div's whithout the .color class
    }
  });
});

<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>
      <div class="swatch-option" tabindex="-1" option-type="1" option-id="50" option-label="test" option-tooltip-thumb="" option-tooltip-value="Red" style="background: Red no-repeat center; background-size: initial;"></div>
      <div class="swatch-option " tabindex="-1" option-type="1" option-id="50" option-label="test" option-tooltip-thumb="" option-tooltip-value="Red" style="background: Red no-repeat center; background-size: initial;"></div>
    </a>
  </div>

</div>

Answer 5

您可以将id属性应用于该课程

<div class="swatch-option color " id="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>

您可以使用ID做类似的事情

var id = $("div.swatch-option").prop("id");
$("div.testSection").each(function() {
    var id = this.id;
    // do something with the id...
});

Answer 6

只需按照我的要求使用批准的答案写出我写的答案-

$( document ).ready(function() {
                            $('div.swatch-option.color').each(function() {
                                var labelFetch = $(this).attr('option-label');
                                $(this).css('background',"none");
                                $(this).append(labelFetch);
                            });
                        });

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

6 个答案: