捕获UI元素值的最有效方法

Question

我有一个包含许多列的页面，并且我试图获取每个列中每个元素的值。

HTML：

    <div class="columnCollection">
        <div class="column">
            Column Name :
            <input class="columnName" type="text" name="ColumnName">

            Types:
            <select class="types"></select>

            Params:
            <select class="parameteria"></select>
   </div>

这是我目前的做法，

        var name = $('.columnName').get(index); // get the column name object
        var nameValue = $(name).val(); // get the value of the object

        var dtype = $('.types').get(index); // get types object
        var dTypeValue = $(dataType).find(":selected").val(); // get value

        var param = $('.parameteria').get(index);  // get param object
        var paramValue = $(param).find(":selected").val(); // get value

这种方法似乎很繁琐，所以我正在探索实现此目的的不同方法。

我尝试过类似的操作，但在jquery / javascript世界中不合法

var name = $('.columnName').get(index).val();

Answer 1

我不太擅长jQuery，但是在Javascript中我会做类似的事情。 也许不是最漂亮的答案，但还有另一种方法。 当然，这仅在所有列始终具有相同结构的情况下才有效。

请记住，如果您有大量的列，这可能会以不好的方式执行！

//get all columns (in Javascript with document.querySelectorAll())
var allColumns = $('.column'); 

for (var i = 0; i < allColumns.length; i++) {
   allColumns[i].children[0].value //columnName
   allColumns[i].children[1].value //types
   allColumns[i].children[2].value //parameteria
}

Answer 2

您可以使自己变得更轻松，并为每个输入和选择框分配一个额外的统一类。 或者，您可以保留现在的内容，但将选择器分组。 我还是建议前者。

无论您选择哪种路线，都要确保使用map（）捕获其值，

一门统一班

 var values = $('.uniform-class').map(function(_, elem) { return elem.value; }).get(); console.log(values); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="columnCollection"> <div class="column"> Column Name : <input class="uniform-class columnName" type="text" name="ColumnName" value="value-one"> Types: <select class="uniform-class types"> <option value="value-two">value-two</option> </select> Params: <select class="uniform-class parameteria"> <option value="value-three">value-three</option> </select> </div> </div> 

分组选择器：

 var values = $('.columnName, .types, .parameteria').map(function(_, elem) { return elem.value; }).get(); console.log(values); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="columnCollection"> <div class="column"> Column Name : <input class="columnName" type="text" name="ColumnName" value="value-one"> Types: <select class="types"> <option value="value-two">value-two</option> </select> Params: <select class="parameteria"> <option value="value-three">value-three</option> </select> </div> </div> 

Answer 3

一个人不使用jQuery是因为它高效，简单且稳定。 但是请确保您可以编写更少和更有效的方法来在jQuery中获得相同的结果。

DOM查找相对繁重。

通过减少这些查找，速度可以提高一倍：

var columns = $('.columnName');
var dataTypes = $('.types');
var params = $('.parameteria');

for(index=0; index < 4; index++) {
  var $column = $(columns[index]);
  var $dataType = $(dataTypes[index]);
  var $param = $(params[index]);

  var nameValue = $column.val();
  var dTypeValue = $dataType.val();
  var paramValue = $param.val();

  console.log(nameValue, dTypeValue, paramValue);
}

你自己看