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

【问题标题】：Get specific attribute value from multiple divs with same classname on page load jquery从页面加载jquery上具有相同类名的多个div中获取特定属性值
【发布时间】：2018-07-31 17:56:41
【问题描述】：

我有一个类似这样的 HTML 网页。我想从类样本选项中隐藏背景，并在 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。所以有点复杂。谁能帮我获取值，以便我禁用背景并将值设置为选项标签

【问题讨论】：

我会这样做：$('div.swatch-option').each(function() { if($(this).hasClass('color')){ console.log($( this).attr('option-label')); }});
感谢大家这么快的帮助，批准的答案是第一个出现的。

标签： javascript jquery html

【解决方案1】：

尝试：

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

使用上面的 sn-p，您将获得所有具有类 .swatch-option 和 .color 的 div - 然后遍历它们并使用 $(this) 访问它们的属性。

【讨论】：

【解决方案2】：

您可以遍历所有具有color 类的swatch-option 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>

【讨论】：

@hsz，你和我的时差是多少？两个不同的人有可能给出相同的答案吗？您是否在答案中创建了代码 sn-p 并且需要时间吗？

【解决方案3】：

$(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>

【讨论】：

我的帖子在你之前就在这里了 :)
@hsz，为什么你认为延迟几秒或几分钟是重复的答案？我看到唯一的区别是当你发布你的时候其他人正在编辑他们的。所以没有复制答案的问题。

【解决方案4】：

您可以将 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...
});

【讨论】：

【解决方案5】：

仅当您还想要其他条件时才使用此答案。

我使用.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>

【讨论】：

您是否有理由获得所有 div.swatch-option 元素，然后检查它们是否有额外的类？与首先使用 $('div.swatch-option.color') 获取正确元素相比，这在性能和速度上有所下降。
不，这没有任何改变。除非您要对没有 color 类的 div 做一些事情，否则它是没有意义的、速度较慢且性能较差的。
看看 hsz 的（现已接受的）答案。 if 语句根本不是必需的，它让您使用 swatch-option 类解析每个 div，而不是只定位正确的。
@Archer 你是对的兄弟，我只是先忘记了。我的错。 ty 来纠正这个问题。 :)

【解决方案6】：

只需根据我的要求使用批准的答案写下我写的答案 -

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

【讨论】：