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()); 
        }); 
       }); 
      }); 
     });