Get specific attribute value from multiple divs with same classname on page load jquery

Question

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

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 complicated. Can anyone help me to get the value so that I disable the background and put value equals to option label

Answer 1

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

Answer 2

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

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

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

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...
});

Answer 6

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);
                            });
                        });