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");
  });
});

请注意，确实没有必要检查是否有任何带有类＆＃34; script-name＆＃34;的元素。存在;如果没有，那么上面的代码将不会造成任何类型的运行时错误。

Answer 2

您可以使用$ .each（）来执行此操作。并且$(selector).somefn()通常不会抛出空指针，因此您可以摆脱空检查

＆＃13;

$("#script-name-2,#script-name").each(function(){
  $(this).animate({
    marginLeft: $(this).css("height")
  });
});

＆＃13;

<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>

＆＃13;

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

2 个答案: