Question

我有一个父元素，并且有一堆重复的子元素具有相同的类。 border类div是动态生成的

类似这样的东西：

<div class="wrapper">
   <div class="border">
      <input type="text" class="main">
      <input type="number" class="sub">
   </div>
   <div class="border">
      <input type="text" class="main">
      <input type="number" class="sub">
   </div>
</div>

我有一个按钮，它将带有div类的border附加到父wrapper类。

我想要一种功能，用于检查以确保具有div类的最后一个border具有至少一个输入框。

我是否可以选择border父级中wrapper类的最后一个div，以便我可以检查其是否具有任何值？

Answer 1

是的，您可以使用querySelectorAll来获取所有带有border类的div，并使用结果的长度来获取最后一个。像这样的东西

let divs = document.querySelectorAll('.border');
let last = divs[divs.length - 1];
let inputs = last.getElementsByTagName('input');
let hasValue = false; // default this to false

for(let i = 0; i < inputs.length; i++){
 // Loop through them all to check for a value. Break if you find one that does
 if(inputs[i].value !== null){
   hasValue = true;
 }
}

if(hasValue){
 // Do what you want to do if at least one has a value
}else{
  // Do what you want to do if none have a value
}

Answer 2

尝试一下，希望它能起作用

let all = [...document.querySelectorAll(".wrapper > .border")];
all.forEach((ele, i) => {
  console.log(i)
  if (i == all.length - 1) { // checking for the last one
    [...ele.children].forEach(el => {

      if (el.value != "") { // check here if value is not empty
        console.log("value not empty")
      }

    })

  }

})

<div class="wrapper">
  <div class="border">
    <input type="text" class="main">
    <input type="number" class="sub">
  </div>
  <div class="border">
    <input type="text" class="main">
    <input type="number" class="sub">
  </div>
</div>

Answer 3

<script>
    var borders = document.getElementsByClassName("wrapper")[0].getElementsByClassName("border");
    var lastBorderIndex = borders.length - 1;
    console.log(borders[lastBorderIndex].getElementsByTagName('input'));
</script>

这使您可以访问包装div中最后一个边框div内的输入字段。现在，您只需要遍历这些输入字段的值以检查它们是否为空。

在动态生成的输入字段中检查空值

3 个答案: