通过 javascript 函数使具有相同类的多个 div 同时工作

Question

我有两个具有相同类名的div：

<div class="bubble" style="margin-bottom: 160px">
        <p>bubble1</p>
    </div>
    <div class="bubble">
        <p>bubble2</p>
    </div>
</div>

我如何应用javascript，以便它们同时工作。现在只有第一个有效，第二个什么也没发生。

Answer 1

JavaScript 中没有真正的同时操作。然而，每个操作或迭代都在几毫秒内发生，足够接近。您可以循环比赛。

var bubbles = document.querySelectorAll('.bubble'); // get all divs with class bubble
[].forEach.call(bubbles, function(bubble){
    // do something to bubble
});

Answer 2

您可以使用以下代码来实现所需的目标。

var bubbles = document.querySelectorAll('.bubble');
for(var i=0; bubbles[i]; i++){
    var bubble =  bubbles[i];
    // now you do whatever you want to do with bubble 
    // i.e bubble.style.marginLeft = "10px";
}

或者你可以使用 jQuery 来做同样的事情。它只有一行代码

$('.bubble').css({marginLeft:10});

谢谢

Answer 3

var x=document.getElementsByClassName('bubble');
//now x is an array of all elements with the class bubble
for(i=0;i<=x.length-1;i++){
    //Do operations accordingly
}