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
}

通过javascript函数使同一个类的多个div同时工作

3 个答案: