我有一个带有多个进度条的页面,它们都有相同的类。是否可以使用 jquery 检查该类的每个元素的宽度是否为 100%?当这个类的每个元素的宽度都是 100% 时执行一个 jquery 函数?
<div class="progress-bar" style="display: none; width: 100%;"></div>
我无法对此进行测试,因为我没有加载 div 的工作版本,但这是我要开始的地方......
function checkStatus() {
//how many of these do we have?
var count = $('.progress-bar').length;
var total = 0;
$('.progress-bar').each(function () {
//save this so we can keep checking it
var $this = $(this);
//has it already loaded?
if (!$this.hasClass('done')) {
if ($this.width == $this.parent().width) {
//loaded so add a class and dont check again
$this.addClass('done');
total = total + 1;
}
}
});
if (count == total) {
//we have finished loading so call function
}
else {
//check again
checkStatus();
}
}
这里的想法是调用一个检查函数,该函数将找到页面上的每个加载 div 并计算它找到的数量。然后它测试每个与其父级相比的宽度。如果它足够宽(即已加载),那么它将在总数中增加 +1。最后它会检查加载条的数量是否与完成的总数相同,如果是,请调用您的函数,如果不再次检查。
即使您遍历所有 <div>
使用 jquery 并尝试获取在%中定义的宽度属性(如您的情况),那么您将无法以百分比访问该值,而是始终返回<div>
在px中,但是如果您设法以某种方式获取元素中<div>
s的宽度值,<input type="hidden">
则可以从那里获取值,为此您可以参考此演示JSFIDDLE
HTML:
<div class="progress-bar" style="display: none; width: 100%;"></div>
<input type="hidden" class="progress-bar-width-val" id="progress_bar_1" value="100">
<div class="progress-bar" style="display: none; width: 95%;"></div>
<input type="hidden" class="progress-bar-width-val" id="progress_bar_2" value="95">
<div class="progress-bar" style="display: none; width: 90%;"></div>
<input type="hidden" class="progress-bar-width-val" id="progress_bar_3" value="90">
<div class="progress-bar" style="display: none; width: 80%;"></div>
<input type="hidden" class="progress-bar-width-val" id="progress_bar_4" value="80">
JS:
$(document).ready(function(){
$('.progress-bar-width-val').each(function(index) {
var width = $(this).attr('value');
alert(width);
});
});