javascript - 如何获取表单中输入文本字段的名称

Question

我需要获取 html 标记中输入文本字段的名称。
我们如何通过类名称或任何特定方式来获取每个输入文本字段的名称来实现此目的？
下面的 javascript 仅给出第一个输入文本字段的名称。我怎样才能实现这个目标？

<div id="firstlevelforthe-page1">
  <div class="first-one-in level">
      <li id= "item_1G2FogWpQkyYzgjWNdfghj" class="first one class-nextlevel-one">  
         <div>
         <div class="somelable-here1">Label 1</div>
         <input type="text" name="dRFTeds23HJKLhgd45" class="textquestion singleline"><br><br>                   
         </div>
        
      </li>
      
      <li id= "item_1G2FogWpQkyYzgjWNa4j9w" class="first one class-nextlevel-second">  
         <div>
         <div class="somelable-here2">Label 2</div>         
         <input type="text" name="uiopGHJFG6854GFD" class="textquestion multiline"><br><br>               
         </div>        
      </li>
      
      <li id= "item_1G2FogWpQkyY234" class="first one class-nextlevel-third">  
         <div>
         <div class="somelable-here2">Label 3</div>         
          <input type="text" name="asdfTYHJK345VB" class="textquestion email"><br><br>               
         </div>        
      </li>
  </div>
</div>

Java脚本代码

var nameArr = new Array();
 nameArr = $('input[type="text"]').attr('name');
 console.log(nameArr);
 document.getElementById('printhere').innerHTML= nameArr;

Answer 1

您可以使用函数$.each循环遍历选定的元素。

$('input[type="text"]').each(function() {
  console.log(this.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="firstlevelforthe-page1">  <div class="first-one-in level">      <li id= "item_1G2FogWpQkyYzgjWNdfghj" class="first one class-nextlevel-one">           <div>         <div class="somelable-here1">Label 1</div>         <input type="text" name="dRFTeds23HJKLhgd45" class="textquestion singleline"><br><br>                            </div>              </li>            <li id= "item_1G2FogWpQkyYzgjWNa4j9w" class="first one class-nextlevel-second">           <div>         <div class="somelable-here2">Label 2</div>                  <input type="text" name="uiopGHJFG6854GFD" class="textquestion multiline"><br><br>                        </div>              </li>            <li id= "item_1G2FogWpQkyY234" class="first one class-nextlevel-third">           <div>         <div class="somelable-here2">Label 3</div>                   <input type="text" name="asdfTYHJK345VB" class="textquestion email"><br><br>                        </div>              </li>  </div></div>

或者您可以使用函数$.toArray()

var array = $('input[type="text"]').toArray();

array.forEach(function(e) {
  console.log(e.name);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="firstlevelforthe-page1">  <div class="first-one-in level">      <li id= "item_1G2FogWpQkyYzgjWNdfghj" class="first one class-nextlevel-one">           <div>         <div class="somelable-here1">Label 1</div>         <input type="text" name="dRFTeds23HJKLhgd45" class="textquestion singleline"><br><br>                            </div>              </li>            <li id= "item_1G2FogWpQkyYzgjWNa4j9w" class="first one class-nextlevel-second">           <div>         <div class="somelable-here2">Label 2</div>                  <input type="text" name="uiopGHJFG6854GFD" class="textquestion multiline"><br><br>                        </div>              </li>            <li id= "item_1G2FogWpQkyY234" class="first one class-nextlevel-third">           <div>         <div class="somelable-here2">Label 3</div>                   <input type="text" name="asdfTYHJK345VB" class="textquestion email"><br><br>                        </div>              </li>  </div></div>

使用箭头函数

var array = $('input[type="text"]').toArray().map(({name}) => name);
console.log(array);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div id="firstlevelforthe-page1">  <div class="first-one-in level">      <li id= "item_1G2FogWpQkyYzgjWNdfghj" class="first one class-nextlevel-one">           <div>         <div class="somelable-here1">Label 1</div>         <input type="text" name="dRFTeds23HJKLhgd45" class="textquestion singleline"><br><br>                            </div>              </li>            <li id= "item_1G2FogWpQkyYzgjWNa4j9w" class="first one class-nextlevel-second">           <div>         <div class="somelable-here2">Label 2</div>                  <input type="text" name="uiopGHJFG6854GFD" class="textquestion multiline"><br><br>                        </div>              </li>            <li id= "item_1G2FogWpQkyY234" class="first one class-nextlevel-third">           <div>         <div class="somelable-here2">Label 3</div>                   <input type="text" name="asdfTYHJK345VB" class="textquestion email"><br><br>                        </div>              </li>  </div></div>