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

Question

我有一个将执行的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> 

Answer 1

您可以使用jQuery .each()依次处理每个元素：

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

请注意，实际上不需要检查是否存在任何具有“脚本名称”类的元素。 如果不执行任何操作，则以上代码将不执行任何操作，而不会导致任何类型的运行时错误。

Answer 2

您可以使用$ .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>