<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.progress-box{ width: 250px; height: 10px; background: #d5d5d5; margin-bottom: 30px; position: relative; }
.progress-strip{ height: 10px; background: #c00;}
.progress-text{ position: absolute; right: -40px; top: -5px; display: inline-block;}
</style>
</head>
<body>
<div class="progress-box">
<div class="progress-strip"></div>
<span class="progress-text">65%</span>
</div>
<div class="progress-box">
<div class="progress-strip"></div>
<span class="progress-text">35%</span>
</div>
</body>
<script type="text/javascript">
//方法1
/*$('.progress-strip').each(function(){
var progresstext = $(this).next('.progress-text').text();
$(this).css('width',progresstext);
});*/
//方法2
$(function(){
var num = $('.progress-strip').size();
for(var i= 0; i<num; i++){
var progresstext = $('.progress-text').eq(i).text();
$('.progress-strip').eq(i).css('width',progresstext);
}
});
</script>
</html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<style type="text/css">
.progress-box{ width: 250px; height: 10px; background: #d5d5d5; margin-bottom: 30px; position: relative; }
.progress-strip{ height: 10px; background: #c00;}
.progress-text{ position: absolute; right: -40px; top: -5px; display: inline-block;}
</style>
</head>
<body>
<div class="progress-box">
<div class="progress-strip"></div>
<span class="progress-text">65%</span>
</div>
<div class="progress-box">
<div class="progress-strip"></div>
<span class="progress-text">35%</span>
</div>
</body>
<script type="text/javascript">
//方法1
/*$('.progress-strip').each(function(){
var progresstext = $(this).next('.progress-text').text();
$(this).css('width',progresstext);
});*/
//方法2
$(function(){
var num = $('.progress-strip').size();
for(var i= 0; i<num; i++){
var progresstext = $('.progress-text').eq(i).text();
$('.progress-strip').eq(i).css('width',progresstext);
}
});
</script>
</html>
2542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
