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

Posted 2023-02-18

【中文标题】从jQuery中的多个相同的类名中获取值CSS

【英文标题】：Get value CSS from multiple same class name in jQuery

【发布时间】：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>

【问题讨论】：

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

【参考方案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>