无法循环到最接近的表单输入

Question

您能否看一下这个演示，让我知道为什么我无法循环进入所有输入并获取其数据类型？

$("button").on("click", function(){
   $(this).closest('form: input').each(function(){
        console.log($(this).data('type'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
 <input data-type="text" type="text" name="fname">
 <input data-type="password" type="password" name="psw">
</form>

<button class="btn btn-secondary">Get Input Types</button>

<form>
 <input data-type="email" type="email" name="email">
 <input data-type="date" type="date" name="date">
</form>

<button class="btn btn-secondary">Get Input Types</button>

Answer 1

我认为您应该将buttons放在form标记内，并使用下面的代码来获得结果。 closest仅在您要查找父元素时才有效。因此，如下所示修改您的代码-

$("button").on("click", function(e) {
  e.preventDefault();
  $(this).closest('form').find('input').each(function() {
    console.log($(this).data('type'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input data-type="text" type="text" name="fname">
  <input data-type="password" type="password" name="psw">
  <button class="btn btn-secondary">Get Input Types</button>
</form>



<form>
  <input data-type="email" type="email" name="email">
  <input data-type="date" type="date" name="date">
  <button class="btn btn-secondary">Get Input Types</button>
</form>

Answer 2

您可以使用closest查找父元素。因为您的按钮不在form内，但它在它旁边。因此，您可以使用prev选择器，然后使用find获取input元素。

您还可以通过@Shubham Baranwal查看答案。将button移到form内也可以。

$("button").on("click", function() {
  $(this).prev('form').find('input').each(function() {
    console.log($(this).data('type'));
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form>
  <input data-type="text" type="text" name="fname">
  <input data-type="password" type="password" name="psw">
</form>
<button class="btn btn-secondary">Get Input Types</button>


<form>
  <input data-type="email" type="email" name="email">
  <input data-type="date" type="date" name="date">
</form>

<button class="btn btn-secondary">Get Input Types</button>