[英]How to get html contents of multiple spans and add the value as class
My HTML: 我的HTML:
<div class="inside">
<ul class="fourcol first">
<li class="amenity-item">Something: <span>0</span></li>
<li class="amenity-item">Something: <span>0</span></li>
<li class="amenity-item">Something: <span>1</span></li>
<li class="amenity-item">Something: <span>0</span></li>
<li class="amenity-item">Something: <span>1</span></li>
<li class="amenity-item">Something: <span>0</span></li>
<li class="amenity-item">Something: <span>1</span></li>
<li class="amenity-item">Something: <span>1</span></li>
<li class="amenity-item">Something: <span>0</span></li>
</ul>
</div>
What I am trying to accomplish: 我要完成的工作:
<div class="inside">
<ul class="fourcol first">
<li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
<li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
<li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
<li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
<li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
<li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
<li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
<li class="amenity-item">Something: <span class="amenity-val-1">1</span></li>
<li class="amenity-item">Something: <span class="amenity-val-0">0</span></li>
</ul>
</div>
My attempt: 我的尝试:
$(function() {
var value_of_span = $.each('span.amenity-val').html()
if (value_of_span == 0) {
$('span.amenity-val').addClass('amenity-val-0');
}
if (value_of_span == 1) {
$('span.amenity-val').addClass('amenity-val-1');
}
})
You can use: 您可以使用:
1) $.each()
to loop through all the span
element inside .amenity-item
: 1) $.each()
遍历.amenity-item
内的所有span
元素:
2) text()
to get the text inside your span 2) text()
获取跨度内的文本
3) addClass()
to add the class based on the retrieved text respectively 3) addClass()
分别基于检索到的文本添加类
$.each($('.amenity-item span'), function () {
var text = $(this).text();
$(this).addClass('amenity-val-' + text);
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.