html - How can I select all elements after a particular element with JavaScript? - Stack Overflow

admin管理员组

文章数量:1391990

I need to acces to all elements after certain element to change some attributes. I know there is nextAll() but I can't use jquery.

Specifically I need to change the label text and the name attribute from the input.

<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="probarInputVacio(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="probarInputVacio(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="probarInputVacio(event)" type="text"/>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>

Thanks for the help.

I need to acces to all elements after certain element to change some attributes. I know there is nextAll() but I can't use jquery.

Specifically I need to change the label text and the name attribute from the input.

<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="probarInputVacio(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="probarInputVacio(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="probarInputVacio(event)" type="text"/>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>

Thanks for the help.

• javascript
• html
• dom

Share Improve this question Follow edited Dec 14, 2017 at 18:08 mhodges 11.1k22 gold badges3131 silver badges4848 bronze badges asked Dec 14, 2017 at 16:50 mgemge 6511 silver badge99 bronze badges 11

• best idea yet has been adding all elements after certain element recursively by .nextSibling in an array – mge Commented Dec 14, 2017 at 16:53
• Can you not use .querySelectorAll() and only take the elements in the resulting NodeList after the element in question? – mhodges Commented Dec 14, 2017 at 16:55
• queryselector yes. how would that be? – mge Commented Dec 14, 2017 at 16:57
• 1 Well, we haven't seen any of your code, so I would have no idea what selectors to use, nor how to target the element you want as your starting point. – mhodges Commented Dec 14, 2017 at 16:58
• 5 Please post the relevant HTML so we can understand what you mean with all elements after element. Also how do you identify the element after which to select the rest ? – Gabriele Petrioli Commented Dec 14, 2017 at 16:59

 |  Show 6 more ments

3 Answers 3

Sorted by: Reset to default 8

If you can get the index of the element after which to start, you can simply use (assuming elements are siblings) the general sibling binator (~)

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

same way if you can exactly identify the element with a css selector (other than index)

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

---

Adding another one where you only have a reference to the node after which to start.

// 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);

Based on this code you have provided, this may help point you in the right direction.

This function takes:

1. A collection of elements
2. A single element as a starting point, from which all subsequent elements will be operated on
3. A callback function that can do whatever you want to do to the elements that are after the element you pass in as the 2nd argument.

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="probarInputVacio(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="probarInputVacio(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="probarInputVacio(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="probarInputVacio(event)" type="text" />
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
      <span class="input-group-btn"></span>
    </div>
  </div>
</div>

This is what I have finally done, even looking a bit dirty. (cant indent correctly that element indented wrong)

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();
}

本文标签： htmlHow can I select all elements after a particular element with JavaScriptStack Overflow