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>

you are already getting the value inside result container. What else do you want? — brk
– brk, Commented May 6, 2017 at 16:52

Angular San · Accepted Answer · 2017-05-08 15:01:11Z

1

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>

answered May 8, 2017 at 15:01

Angular San

3561 silver badge8 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

caramba · Accepted Answer · 2017-05-06 17:07:43Z

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>

edited May 6, 2017 at 17:07

answered May 6, 2017 at 16:55

caramba

22.5k20 gold badges94 silver badges134 bronze badges

7 Comments

Firmansyah Over a year ago

This does not answer my question, I want to take the CSS value from each of those elements

Firmansyah Over a year ago

both, In the same class name :)....Do i have to use method for(), To get both values dynamically

caramba Over a year ago

@Firmansyah which is both? you can get them all! So my question is which one(s) do you want? Do you want to compare the values from one element to the other?

Firmansyah Over a year ago

I want to get the CSS value, From class 'isi1' and 'isi2'...... But whose class is executed is $('.content') not $('.isi1') or $('.isi2').....

Firmansyah Over a year ago

Thx for you help, It's Work :D, Very Awesome

|

Collectives™ on Stack Overflow

Get value CSS from multiple same class name in jQuery

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related