Question

我需要在html标记中获取输入文本字段的name。
我们如何使用类名称或任何获取每个输入文本字段名称的特定方法来实现此目标？
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>

Answer 2

您必须使用循环来迭代DOMlist的每个元素：

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

欢呼

Answer 3

您可以执行以下操作，甚至不需要JQuery：

var inputNames = Array.from(document.getElementsByTagName('input')).map(node => node.name);

这使用Web API获取包含所有

的HTMLCollection。

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

3 个答案: