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

Question

我有一个带有多个进度条的页面，它们都有相同的类。是否可以使用 jquery 检查该类的每个元素的宽度是否为 100%？当这个类的每个元素的宽度都是 100% 时执行一个 jquery 函数？

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

Answer 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。最后它会检查加载条的数量是否与完成的总数相同，如果是，请调用您的函数，如果不再次检查。

Answer 2

即使您遍历所有 <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);
    });
});