如何为多个实例优化 querySelectorAll

Question

我有以下有效的 ecmascript，但如果可能的话，我宁愿将其减少到一行，或者只是下一个最好的东西，而不是多次编写 querySelectorAll。我该如何利用这一点？    document.querySelectorAll('main .testimonials ul.shadow-box')[2].classList.remove('shadow-box');    document.querySelectorAll('main .testimonials ul.shadow-box')[1].classList.remove('shadow-box');    document.querySelectorAll('main .testimonials ul.shadow-box')[0].classList.remove('shadow-box');

Answer 1

您可以使用forEach()只执行一次查询，然后遍历结果。

document.querySelectorAll('main .testimonials ul.shadow-box').forEach(function(el) {

  el.classList.remove('shadow-box');

});

ul {

  background: red;

  min-height: 20px;

}

.shadow-box {

  background: blue;

}

<main>

  <div class="testimonials">

    <ul class="shadow-box"></ul>

    <ul class="shadow-box"></ul>

    <ul class="shadow-box"></ul>

    <ul class="shadow-box"></ul>

  </div>

</main>

Answer 2

您可以创建一个数组，然后slice创建它，然后循环遍历它。

[...document.querySelectorAll('main .testimonials ul.shadow-box')]

   .slice(0, 3)

   .forEach(x => x.classList.remove('shadow-box'));