javascript - 定位兄弟元素的子元素

Question

以下代码目标fieldsets是同级的，以便在前一个中选择fieldsets时可以启用这些目标：input buttons

document.querySelectorAll("fieldset").forEach(fieldset => {
  fieldset.addEventListener("change", function() {
    let nextFieldset = this.nextElementSibling

    while (nextFieldset && !nextFieldset.disabled) {
      nextFieldset = nextFieldset.nextElementSibling
    }

    if (nextFieldset) {
      nextFieldset.disabled = false
    }
  })
})

---

<form>
  <fieldset> … </fieldset>
  <fieldset> … </fieldset>
  <fieldset> … </fieldset>
</form>

我怎样才能定位fieldsets到单独的内部sections？

<form>
  <section><fieldset> … </fieldset></section>
  <section><fieldset> … </fieldset></section>
  <section><fieldset> … </fieldset></section>
</form>

标签： javascripthtml

Answer 1

这是完整的工作解决方案：

document.querySelectorAll("section").forEach(section => {
  section.addEventListener("change", function() {
    let nextFieldset = this.nextElementSibling.querySelector("fieldset")

    while (nextFieldset && !nextFieldset.disabled) {
      nextFieldset = nextFieldset.nextElementSibling
    }

    if (nextFieldset) {
      nextFieldset.disabled = false
    }
  })
})