如何在jquery中按类名获取输入元素值答案

【问题标题】：How to fetch the input elements value by class name in jquery如何在jquery中按类名获取输入元素值
【发布时间】：2020-02-18 14:52:23
【问题描述】：

我想获取输入元素的值，它们具有类“特征”。我可以访问所有这些

警报($('.features').length);

如果我错了，请纠正我，$('.features') 是一个 html 输入元素数组。但是我试过了

Array.isArray($('.features')) // 返回 false

我想访问每个元素的值。如何实现这一目标我试着做一个，下面是代码sn -p

function maintest() {

 for(i = 0 ; i < 5 ; i ++ ) {
  $("<input>").attr({"class":"features"}).appendTo("#mainDiv").val("input"+i);
  $("<br/><br/>").appendTo("#mainDiv");
 }
  
  $("<button> Click me! </button>").click(function() {
  let inputArray = [];
  inputArray = $('.features');
  alert(inputArray.length);
    //alert( inputArray[0].val());
    //what must be put here to see the data value
  }).appendTo("#mainDiv");
 }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

【问题讨论】：

"我想访问每个元素的值" - 你想处理它们吗？您可以遍历集合，也可以使用.map 创建数组等
map() 或 serialize() 通常是获取所需信息的方法
如果你想获取每个输入值，你可以试试这个codepen.io/Maniraj_Murugan/pen/dyoXVyE..

标签： javascript jquery html

【解决方案1】：

在 javascript 中，将变量设置为一个值会覆盖之前的值。它不强制类型，所以这些行：

let inputArray = [];
inputArray = $('.features');

和

一样

let inputArray = $('.features');

$() 返回一个 jquery 集合，而不是一个 javascript 数组；当然，有相似之处，但它不是“数组”。

要获取值，您可以遍历集合，也可以使用.map 提取值，例如：

var valuesArray = $('.features').map(function() {
                      return $(this).val();
                  }).toArray();

function maintest() {

  for (i = 0; i < 5; i++) {
    $("<input>").attr({ "class": "features" })
        .appendTo("#mainDiv")
        .val("input" + i);
    $("<br/><br/>").appendTo("#mainDiv");
  }

  $("<button> Click me! </button>").click(function() {
    let inputArray = $('.features');
    var values = inputArray.map(function() {
      return $(this).val();
    }).toArray();
    console.log(values);
  }).appendTo("#mainDiv");
}

$(() => maintest());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="mainDiv"></div>

【讨论】：

【解决方案2】：

您可以使用 jQuery $.each 方法循环输入数组。

示例：

function maintest() {
  for (i = 0; i < 5; i++) {
$("<input>")
  .attr({ class: "features" })
  .appendTo("#mainDiv")
  .val("input" + i);
$("<br/><br/>").appendTo("#mainDiv");
  }

  $("<button> Click me! </button>")
.click(function() {
  let inputArray = [];
  inputArray = $(".features");
  $.each(inputArray, function(index, input) {
    console.log(input.value);
  });
})
.appendTo("#mainDiv");
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body onload="maintest()">
  <div id="mainDiv"></div>
</body>

【讨论】：