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

你自己看