Question

我一直在寻找解决方案达数小时之久，我没有多次使用相同的ID ，尽管这似乎是唯一的解释...

图形在html中是这样定义的...

<div class="graph v graphcpuusage"></div>
<!--some other stuff-->
<div class="graph v graphcpuusage"></div>

我正在使用...填充条形图

for(i=0;i<25;i++){
    $('.graph.v').append('<div class="bar"></div>');
}

这是应该更改特定图形中每个条形的高度的代码...

window.setInterval(function(){
    cyclegraph('.graphcpuusage',parseInt(data.cpu_usage));
}, 5000);

function cyclegraph(graph,newvalue){
    var val, mode, newval;
    $(graph).each(function(){
        if($(this).hasClass('h')){ //graph is horisontal, so change width
            mode='width';
        }else{ //graph is vertical, so change height, which is default
            mode='height';
        }
        newval=newvalue;
        $(this).find('.bar:not(:first-child)').each(function(index,domObject){
            val=$(this).css(mode);
            $(this).css(mode,newvalue.toString()+'%');
            newvalue=val;
        });
    });
}

应该对所有匹配的图进行迭代，然后再对所有将其高度设置为先前的条形图进行迭代。但是，console.log()确认代码已按预期在2个图形上运行48次，但仅第一个.bar的高度被更改。

我对:nth-child('+index.string()+')使用了此代码的不同变体，并使用了不同的.each语句和JQuery的不同版本，但是所有这些都导致相同的输出。似乎两个.each()语句都存在相同的问题。

Answer 1

我找到了问题。

问题是当您调用val = $(this).css(mode)时，如果它已经设置了值，它将以px返回它，因此val将等于字符串"0px"，例如不是数字。然后，稍后在行newvalue = val上将newvalue设置为0px。然后，在下一个循环中，您尝试设置$(this).css(mode,newvalue.toString()+'%');，例如，尝试将其设置为0px%。

要解决此问题，我做了以下事情：

$(this).find('.bar:not(:first-child)').each(function(index,domObject){
    val = ($(this).data('size')) ? $(this).data('size') : 0;
    $(this).css(mode,newvalue.toString()+'%').data('size', newvalue);
    newvalue = val;
});

这可以确保使用jQuery的.data（）方法将大小始终存储为数字而不是文本。

我在机器上对此进行了测试，并且可以正常工作。祝你好运！

jQuery似乎每次匹配都运行，但是每次都只返回第一个元素

1 个答案: