I have a webpage with HTML something like this. I want to hide the background from the class swatch-option, and render the option-label in the div.

But I am not able to get the option-label.

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

<script src=".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>

I have a webpage with HTML something like this. I want to hide the background from the class swatch-option, and render the option-label in the div.

But I am not able to get the option-label.

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

<script src="https://ajax.googleapis./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>

This is the code I am trying. But it displays undefined. There are many more divs on the page with class = "swatch-attribute swatch-layered", and similarly many more divs with classes swatch-attribute-options and swatch-option. So it is a bit plicated. Can anyone help me to get the value so that I disable the background and put value equals to option label

• javascript
• jquery
• html

Share Improve this question Follow edited Jul 31, 2018 at 9:39 Zakaria Acharki 67.5k1515 gold badges7878 silver badges106106 bronze badges asked Jul 31, 2018 at 9:31 GaganGagan 29433 silver badges1616 bronze badges 2

• 1 I would do : $('div.swatch-option').each(function() { if($(this).hasClass('color')){ console.log($(this).attr('option-label')); }}); – Steve Commented Jul 31, 2018 at 9:35
• Thanks guys for helping so fast, the approved answer was the one that came first. – Gagan Commented Jul 31, 2018 at 9:47

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 3

Try with:

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

With above snippet, you'll get all divs with classes .swatch-option and .color - then iterate over them and access their attributes with $(this).

you can iterate over all swatch-option div having color class and check option-label attribute

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

<script src="https://ajax.googleapis./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>

The $(this) has no context in your code, you should loop through the divs then the this will refer to the div :

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

<script src="https://ajax.googleapis./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>

You could apply an id attribute to the class

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

And the you could do something with the ID like so

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

ONLY USE THIS ANSWER IF YOU WANT A ELSE condition too.

I have used .each function to find all div.swatch-option and using the if() condition I have only taken account of the div which has the class .color if don't want it you can remove that.

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

Just writing the answer which I wrote using the approved answer as per my requirement -

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