是否可以检查某个类的所有元素的宽度是否等于某个宽度？最好使用Jquery

我有一个有多个进度条的页面，它们都有相同的类。是否可以使用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();
        }
}

---

这里的想法是调用一个check函数，该函数将查找页面上的每个加载div，并计算找到的div数。然后，它测试每一个与其父对象相比的宽度。如果其宽度足够大（即已加载），则其总数将增加+1。最后，它将检查加载条的数量是否与已完成的条的总数相同，如果相同，则调用函数，如果不再次检查。

即使您使用jquery循环所有

，并尝试获取%中定义的宽度属性（如您的情况）然后您将无法以百分比形式访问该值，相反，它将始终返回px中

的值，但是如果您设法在

元素中获取

的宽度值，则可以从中获取值，为此，您可以参考此演示

HTML:

---

根据用例的具体情况，搜索宽度不为100%的进度条可能是最简单的。如果未找到任何值，则execute函数宽度始终作为

px

值返回，因此您不能直接检查

100%

。您需要将其与其父级的宽度进行比较，并检查它们是否相同，以允许填充/边距。这些进度条是否根据异步javascript函数的进度进行更新？如果是这样的话，使用承诺比检查UI更好。

<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">

$(document).ready(function(){
    $('.progress-bar-width-val').each(function(index) {
        var width = $(this).attr('value');
        alert(width);
    });
});