檢查動態生成的輸入字段中的空值

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>

我有一個按鈕，它將帶有border類的div附加到父wrapper類。

我想要一個功能，我檢查以確保帶有border類的最后一個div至少填寫了一個輸入框。

有沒有辦法讓我在wrapper父級中選擇帶有border類的最后一個 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 內的輸入字段。 現在您只需要遍歷這些輸入字段的值來檢查它們是否為空。