Question

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

HTML：

        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

以下是我目前的做法，

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

这种方法似乎很重要，所以我正在探索实现这一目标的不同方法。

我尝试了类似这样的东西，但它在jquery / javascript world中不合法

{{1}}

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()来捕捉其值，

一个统一类

＆＃13;

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

＆＃13;

<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>

＆＃13;

对选择器进行分组：

＆＃13;

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

＆＃13;

<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>

＆＃13;

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);
}

See for yourself

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

3 个答案: