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();
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
}
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>
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);
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.