如何使用纯JavaScript在特定元素之前获取所有元素？

Question

我有一个html如下所示

<div class="img-row">

    <div class="img-column move">
        <img class="demo" src="/image/001.jpg">
    </div>

    <div class="img-column move"> 
        <img class="demo" src="/image/002.jpg">
    </div>

    <div class="img-column move moving">
        <img class="demo" src="/image/003.jpg">
    </div>

    <div class="img-column move">.   
        <img class="demo" src="/image/004.jpg">
    </div>

</div>

如您所见，在父div.img-row下有四个子div，它包含类.move；第三个子div包含一个额外的类.move。我想在包含.moving类的子项之前选择所有子项。注任何子级都可以包含.moving类，并且在任何情况下，我都希望所有子级位于它之前。

这就是我所做的

document.querySelectorAll('.move:not(.moving)')

但在本例中它也选择最后一个子项。在使用JavaScript选择类.moving之前，我如何确保只有子类？

我在stackoverflow中发现了一个类似的问题：在element with Class之前选择所有元素？但提供的解决方案是在CSS中。我想要一个javascript解决方案。

Answer 1

您可以使用convert NodeList转换为Array，然后切片到具有moving类的元素的第一个索引

null

const allElements = Array.from(document.querySelectorAll('.move'))
const expectedElements = allElements.slice(
  0,
  allElements.findIndex(element => element.classList.contains('moving'))
)

console.log(expectedElements.length)

<div class="img-row">

  <div class="img-column move">
    <img class="demo" src="/image/001.jpg">
  </div>

  <div class="img-column move">
    <img class="demo" src="/image/002.jpg">
  </div>

  <div class="img-column move moving">
    <img class="demo" src="/image/003.jpg">
  </div>

  <div class="img-column move">.
    <img class="demo" src="/image/004.jpg">
  </div>

</div>