jquery如何迭代嵌套元素並獲得它們的值

Question

我有div其中我有幾個form。我需要遍歷每個表單並從中獲取值。對於調試，我嘗試以下內容

$(document).on('submit', '.submit_button', function() { 
    $('#days_payment').children('form').each(function() { 
     console.log(this); 
    }); 
    }); 

但它不工作，頁面重新加載並沒有打印到控制檯。

如何進行正確的循環？

Answer 1

要防止出現提交，記錄後，你的函數返回false：

$(document).on('submit', '.submit_button', function() { 
    $('#days_payment').children('form').each(function() { 
     console.log(this); 
    }); 
    return false; 
}); 

Answer 2

你是不是捕捉任何傳遞的值（例如索引和值），在回調函數爲您.each 。

改變它稍微：

$('#days_payment').children('form').each(function(indx, el) { 
    console.log(el.value) 
}) 

假設你的DOM遍歷是正確的，那將您form內登錄各元素的值。

您可能還希望防止事件被髮起所以加這也默認提交一份行動：

$(document).on('submit', '.submit_button', function(e) { 
    e.preventDefault() 

    //... 
}) 

Answer 3

使用event.preventDefault()防止表單提交。

$(document).on('submit', '.submit_button', function(e) { 
    e.preventDeault(); 
    $('#days_payment').children('form').each(function() { 
     console.log(this); 
    }); 
    }); 

Answer 4

HTML：

<div id="days_payment" > 
     <form action="/" method="post" name="form1"> 
      <input type="text" name="inp1" value="V1" /> 
      <button id="sub1" class="submitButton">sub1</button> 
     </form> 
     <form action="/" method="post" name="form2"> 
      <input type="text" name="inp2" value="V2" /> 
      <button id="sub2" class="submitButton">sub2</button> 
     </form> 
     <form action="/" method="post" name="form3"> 
      <input type="text" name="inp3" value="V3" /> 
      <button id="sub3" class="submitButton">sub3</button> 
     </form> 
    </div> 

JS：

$(document).ready(function() { 
      $(".submitButton").on("click", function() { 
       $("#days_payment form").each(function() { 
        $(this).children("input").each(function() { 
         console.log($(this).val()); 
        }); 
       }); 
      }); 
     });