如何使用 JavaScript 选择特定元素之后的所有元素？

Question

我需要访问某个元素之后的所有元素来更改某些属性。我知道有 nextAll() 但我不能使用 jquery。

具体来说，我需要更改输入中的标签文本和名称属性。

<div class="row respuesta">
  <div class="form-group col-md-12">
    <label>Respuesta 1:</label>
    <div class="input-group">
      <input class="form-control" name="respuesta1" onblur="comprobarInputVacio(event)" type="text"/>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>
<div class="row respuesta">
  <div class="form-group col-md-12">
    <label>Respuesta 2:</label>
    <div class="input-group">
      <input class="form-control" name="respuesta2" onblur="comprobarInputVacio(event)" type="text"/>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>
<div class="row respuesta">
  <div class="form-group col-md-12">
    <label>Respuesta 3:</label>
    <div class="input-group">
      <input class="form-control" name="respuesta3" onblur="comprobarInputVacio(event)" type="text"/>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>

谢谢您的帮助。

Answer 1

如果您可以获取index要开始的元素的 ，则可以简单地使用（假设元素是兄弟元素）general sibling combinator (~)

let index = 3; // somehow get the index
let nextsiblings = document.querySelectorAll(`.common-class:nth-child(${index}) ~ *`)

如果您可以使用 css 选择器（索引除外）准确识别元素，则采用相同的方式

let initialSelector= '#id'; // could also be a unique class like .active
let nextsiblings = document.querySelectorAll(`${initialSelector} ~ *`);

添加另一个节点，其中您只有对要启动的节点的引用。

// node is the one after which to start
let siblingsAndSelf = Array.from(node.parentNode.children);
let index = siblingsAndSelf.indexOf(node);
let nextAll = siblingsAndSelf.slice(index+1);