我有一个包含多个进度条的页面,它们都有相同的类。如果每个具有此类的元素的宽度为100%,是否可以使用jquery进行检查?当这个类的每个元素的宽度都是100%时,执行一个jquery函数?
<div class="progress-bar" style="display: none; width: 100%;"></div>
答案 0 :(得分:1)
我无法测试这个,因为我没有加载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总数。最后,它将检查加载条的数量是否与完成的总数相同,如果是,则调用您的函数,如果不再检查。
答案 1 :(得分:0)
即使您使用jquery遍历所有<div>
并尝试获取%中定义的width属性(如您的情况),那么您将无法以百分比形式访问该值,而是始终返回 px 中<div>
的值,但如果您以某种方式设法获取<div>
s的宽度值<input type="hidden">
元素您可以从中获取值,为此您可以参考 demo 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);
});
});