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

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() 方法始终将大小存储为数字，而不是文本。

我在我的机器上测试了这个并且它有效。 祝你好运！