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

Question

I have a page that contains many columns, and I'm trying to get the values of each of the elements within each column.

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>

And here's how I'm currently doing it,

        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

This method seems hefty so I am exploring different ways of accomplishing this.

I tried something like this but it's not legal in jquery/javascript world

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

Answer 1

I'm not very good at jQuery but in Javascript I would do something like this. Maybe not the prettiest answer but still another way to do it. This only works of course if all columns always have the same structure.

Keep in mind that this could really perform in a bad way if you have a huge amount of columns!

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

You could make it easier on yourself and assign an additional, uniform class to each of the inputs and select boxes. Or you can keep what you have now but group the selectors. I'd recommend the former though.

Whichever route you choose you want to make sure to use map() to capture their values,

One Uniform Class

 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> 

Grouping the Selectors:

 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

One doesn't use jQuery because it is efficient, it is used to be simple and stable. But sure you can write less and more efficient ways of obtaining the same result in jQuery.

The DOM lookups are relatively heavy.

By reducing these lookups speed can be doubled:

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