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