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

Question

如何从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>

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

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