如何为多个实例优化 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) {&nbsp; el.classList.remove('shadow-box');});ul {&nbsp; background: red;&nbsp; min-height: 20px;}.shadow-box {&nbsp; background: blue;}<main>&nbsp; <div class="testimonials">&nbsp; &nbsp; <ul class="shadow-box"></ul>&nbsp; &nbsp; <ul class="shadow-box"></ul>&nbsp; &nbsp; <ul class="shadow-box"></ul>&nbsp; &nbsp; <ul class="shadow-box"></ul>&nbsp; </div></main>

Answer 2

您可以创建一个数组，然后slice创建它，然后循环遍历它。[...document.querySelectorAll('main .testimonials ul.shadow-box')]&nbsp; &nbsp;.slice(0, 3)&nbsp; &nbsp;.forEach(x => x.classList.remove('shadow-box'));