当类被多个元素使用时，在不同的线程中多次执行JavaScript代码

Execute JavaScript code multiple times in different threads when the class is used by multiple elements

本文关键字：线程 执行 代码 JavaScript 元素      更新时间：2023-09-26

我有一个JavaScript代码将执行，让我们说当ID #script-name被使用。当标识符被多个，比如两个HTML元素使用时，我想在不同的线程中多次执行它。因此，我将#script-name重构为.script-name类。假设我有这样的代码:

if (document.getElementsByClassName('script-name')[0]) {
  var obj = $(".script-name");
  obj.animate({
    marginLeft: obj.css("height")
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="script-name" style="height: 25px; background-color: red;">height 25px</div>
<div class="script-name" style="height: 50px; background-color: blue;">height 50px</div>

该代码将使两个元素动画为marginLeft: "25px"，其中我希望第二个元素基于其自己的marginLeft: obj.css("height")动画。有没有一种方法来实现这一点，而不创建另一个标识符与这样的另一个代码块?

if (document.getElementById('script-name')) {
  var obj = $("#script-name");
  obj.animate({
    marginLeft: obj.css("height")
  });
}
if (document.getElementById('script-name-2')) {
  var obj = $("#script-name-2");
  obj.animate({
    marginLeft: obj.css("height")
  });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="script-name" style="height: 25px; background-color: red;">height 25px</div>
<div id="script-name-2" style="height: 50px; background-color: blue;">height 50px</div>

您可以使用jQuery .each()按顺序处理每个元素:

$(".script-name").each(function() {
  var $this = $(this);
  $this.animate({
    marginLeft: $this.css("height");
  });
});

注意，实际上不需要检查是否存在类为"script-name"的元素;如果没有，那么上面的代码将不做任何事情而不会导致任何类型的运行时错误。

您可以使用$.each()来做到这一点。$(selector).somefn()通常不会抛出空指针所以你可以去掉空检查

$("#script-name-2,#script-name").each(function(){
  $(this).animate({
    marginLeft: $(this).css("height")
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="script-name" style="height: 25px; background-color: red;">height 25px</div>
<div id="script-name-2" style="height: 50px; background-color: blue;">height 50px</div>

相关文章：