从jQuery中的多个相同的类名中获取值CSS答案

【问题标题】：Get value CSS from multiple same class name in jQuery从jQuery中的多个相同的类名中获取值CSS
【发布时间】：2017-10-05 00:00:47
【问题描述】：

如何在 jQuery 中从多个相同的类名中获取值 CSS？

也就是说，我有很多元素要录入数据库，

每个元素都有不同的 CSS 值，

例如每个元素的CSS值为'background-image'，

我想取每个元素的值并使用ajax请求输入到数据库中，

问题，如何从该元素的每个数据中获取 CSS 值？

使用这个简单的例子

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

编辑https://jsfiddle.net/FIERMANDT/b1pq3p3z/

编辑 2020 年 7 月 21 日 VanilaJS 版本

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

【问题讨论】：

您已经在结果容器中获取了值。你还想要什么？

标签： javascript jquery html css

【解决方案1】：

您的代码的问题是您使用每个循环的最后一次迭代“覆盖”了值...

$(this) 是循环内的实际元素。

看看each() 函数是如何工作的。在回调中，您可以获得index，然后如果您将append() html 内容添加到元素，您就会知道自己在哪里。

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

【讨论】：

这不能回答我的问题，我想从每个元素中获取 CSS 值
两者，在同一个类名中:)....我必须使用for()方法，动态获取两个值
@Firmansyah 两者兼而有之？你可以得到它们！所以我的问题是你想要哪一个？是否要将一个元素的值与另一个元素进行比较？
我想获取 CSS 值，从类 'isi1' 和 'isi2'...... 但是执行的类是 $('.content') 而不是 $('.isi1 ') 或 $('.isi2').....
谢谢你的帮助，它的工作：D，非常棒

【解决方案2】：

简单控制台

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

【讨论】：