如何使用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

如果你可以得到之后开始的元素的索引，你可以简单地使用（假设元素是兄弟）一般兄弟组合子（〜） let index = 3; //不知何故获得索引 让nextsiblings = document.querySelectorAll（`.common-class：nth-​​child（$ {index}）〜*`） 同样的方法，如果你可以用css选择器（索引除外）准确识别元素 让initialSelector ='＃id'; //也可以是像.active这样的独特类 让nextsiblings = document.querySelectorAll（`$ {initialSelector}〜*`）; 添加另一个只有一个节点的引用，然后在该节点之后启动。 // node是启动之后的节点 让siblingsAndSelf = Array.from（node.parentNode.children）; let index = siblingsAndSelf.indexOf（node）; let nextAll = siblingsAndSelf.slice（index + 1）;

Answer 2

根据您提供的此代码，这可能有助于您指明正确的方向。

此功能需要：

1. 元素集合
2. 单个元素作为起点，所有后续元素将在
上运行
3. 一个回调函数，可以对作为第二个参数传入的元素之后的元素执行任何操作。

var containers = document.querySelectorAll(".respuesta");

var response2Container = Array.prototype.find.call(containers, function (container) {
  return container.querySelector("input[name='respuesta2']") !== null;
});


function applyAfterElement(elems, afterElem, fn) {
  var after = false;
  for (let i = 0; i < elems.length; i++) {
    let elem = elems[i];
    if (after) {
      fn(elem, i);
    }
    else if (elem === afterElem) {
      after = true;
    }
  }
}

applyAfterElement(containers, response2Container, function (elem, orgIndex) {
  var label = elem.querySelector("label");
  var input = elem.querySelector("input");
  label.innerText = "Updated Respuesta Label:";
  input.setAttribute("name", "updated" + input.name);
});

<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>
<div class="row respuesta">
  <div class="form-group col-md-12">
    <label>Respuesta 4:</label>
    <div class="input-group">
      <input class="form-control" name="respuesta4" 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 3

这就是我最终做的，甚至看起来有点脏。 （无法正确缩进该元素缩进错误）

function borrarUnaRespuesta(event){
   numRes--;
   var aBorrar = event.currentTarget.parentNode.parentNode.parentNode.parentNode;
   var proximoLabel = aBorrar.firstChild.firstChild.textContent;
   var proximoNameAtt = aBorrar.firstChild.firstChild.nextSibling.firstChild.getAttribute("name");
   var elementoPosterior = aBorrar.nextSibling;
   aBorrar.parentNode.removeChild(aBorrar);
   recolocarRespuestas(elementoPosterior,proximoLabel,proximoNameAtt);
}
//coloco bien las respuestas despues de borrar una en concreto
function recolocarRespuestas(elementoPosterior,proximoLabel,proximoNameAtt){
   var anteriorLabel = "";
   var anteriorNameAtt = "";
   while(elementoPosterior.nodeName != "INPUT"){
       anteriorLabel = elementoPosterior.firstChild.firstChild.textContent;
       elementoPosterior.firstChild.firstChild.textContent = proximoLabel;
       anteriorNameAtt = elementoPosterior.firstChild.firstChild.nextSibling.firstChild.getAttribute("name");
elementoPosterior.firstChild.firstChild.nextSibling.firstChild.setAttribute("name",proximoNameAtt);
       proximoNameAtt = anteriorNameAtt;
       proximoLabel = anteriorLabel;
       elementoPosterior = elementoPosterior.nextSibling;
   }
   //this just places correctly the answers
   checkNumRespuestas();
}