是否可以检查具有某个等级的所有元素的宽度是否等于某个宽度?最好是Jquery

时间:2013-11-01 13:55:12

标签: jquery class width

我有一个包含多个进度条的页面,它们都有相同的类。如果每个具有此类的元素的宽度为100%,是否可以使用jquery进行检查?当这个类的每个元素的宽度都是100%时,执行一个jquery函数?

<div class="progress-bar" style="display: none; width: 100%;"></div>

2 个答案:

答案 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);
    });
});