Get value CSS from multiple same class name in jQuery

Question

How to Get value CSS from multiple same class name in jQuery?

That is, I have many elements that want to be entered into the database,

Each of these elements has different CSS values,

For example the CSS value of each element is 'background-image',

I want to take the value of each element and input into the database using Ajax request,

Question, how to take CSS value from each data on that element?

Use this simple Example

 $('.content').each(function() { $('.result').html('isi1: ' + $(this).css('width') + ' ==== isi2: ' + $(this).css('width')); });

 span.content { display: inline-block; height: 100px; background: #666; } span.isi1 { width: 100px; } span.isi2 { width: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id_1"> <span class="content isi1">ISI1</span> <span class="content isi2">ISI2</span> </div> <p class="result"></p>

Edit on https://jsfiddle.net/FIERMANDT/b1pq3p3z/

Edit 21 Jul 2020 VanilaJS version

 /*for loop and getComputedStyle() method*/ var getEachCSSVal = document.querySelectorAll('.content'); for (var i = 0; i < getEachCSSVal.length; i++) { var cssVal = window.getComputedStyle(getEachCSSVal[i]).getPropertyValue('width'); console.log(cssVal) }

 span.content { display: inline-block; height: 100px; background: #666; } span.isi1 { width: 100px; } span.isi2 { width: 200px; }

 <div id="id_1"> <span class="content isi1">ISI1</span> <span class="content isi2">ISI2</span> </div> <p class="result"></p>

Answer 1

The problem with your code is that you "overwrite" the value with last iteration from the each loop...

$(this) is the actual element inside the loop.

See how the each() function works. in the callback you can get the index and then you kind of know where you are if you append() html content to an element.

 $('.content').each(function(index){ $( ".result" ).append( "<div>isi"+index+": "+$(this).css('width')+"</div>" ); });

 span.content { display: inline-block; height: 100px; background: #666; } span.isi1 { width: 100px; } span.isi2 { width: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id_1"> <span class="content isi1">ISI1</span> <span class="content isi2">ISI2</span> </div> <p class="result"></p>

Answer 2

Simple Console

 $('.content').each(function(index){ console.log($(this).css('width')); });

 span.content { display: inline-block; height: 100px; background: #666; } span.isi1 { width: 100px; } span.isi2 { width: 200px; }

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="id_1"> <span class="content isi1">ISI1</span> <span class="content isi2">ISI2</span> </div> <p class="result"></p>