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：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="test">0</span>
<span class="test">-5</span>
<span class="test">0</span>
<span class="test">-5</span>
<span class="test">0</span>
<br/>
<button id="go">go</button>

JS：

<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>

jquery如何迭代嵌套元素并获取它们的值

4 个答案: