Início / coding / Perguntas / 79544475
Accepted
jsx97
Asked: 2025-03-30 18:53:38 +0800 CST

Encontre um elemento específico que segue outro elemento específico

  • 772

Em CSS, se você quiser atingir um elemento específico que segue imediatamente outro elemento específico, você usaria o combinador irmão mais próximo:

<style>
/* any 'p' that immediately follows 'div' will be red */
div + p { color: red; }
</style>

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

<div>
  <p>foo</p>  <!-- black -->
</div>
<p>bar</p>    <!-- red   -->
<p>baz</p>    <!-- black -->

Mas como fazer isso em JavaScript? Eu tentei closest, mas não estou surpreso que não funcione. Se eu entendi sua descrição no MDN, a intenção é que funcione de forma diferente.

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      document.querySelector(input.closest('body > .output')).innerHTML = 'input.innerHTML';
    }
  }
</script>

Como fazer isso funcionar?

javascript

2 respostas

  1. Best Answer

    Isso é abordado pela segunda duplicata sinalizada, Existe uma maneira de selecionar nós irmãos?, e basicamente copiado da documentação nextElementSibling , mas vou colocá-la aqui por enquanto.

    Itere sobre cada input's nextElementSiblings até encontrar um que contenha a classe relevante. Aqui usandoclassList.contains

    for (const input of document.querySelectorAll('.input')) {
  let el = input.nextElementSibling;

  while (el && !el.classList.contains("output")) {
    el = el.nextElementSibling;
  }

  if (el) {
    el.innerHTML = input.innerHTML;
  }
}
    <div class="input" style="display: none">
  foo-1
</div>
<h3>Foo 1</h3>
<div class="output"></div>

<div class="input" style="display: none">
  foo-2
</div>
<h3>Foo 2</h3>
<div class="output"></div>

    • 2

  2. Você pode usar Element#nextElementSibling:

    <div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<div class="input" style="display: none">
foo
</div>
<div class="output"></div>

<script>
  'use strict';

  window.onload = function() {
    for (const input of document.querySelectorAll('.input')) {
      input.nextElementSibling.innerHTML = input.innerHTML;
    }
  }
</script>

    • 1

relate perguntas