jQuery:按class遍历元素并创建关联数组
jQuery: Loop through elements by class and create associative array
我有一个可变元素列表,需要成对获取它们的名称和值(关联数组或对象)。
到目前为止我有以下内容,但如何为每个元素创建名称和值对?
var names = [];
var values = [];
$('.modalField').each(function() {
fieldName = $(this).attr('name');
fieldVal = $(this).val();
names.push(fieldName);
values.push(fieldVal);
});
感谢您的帮助,
汤姆
var assoc = {};
$('.modalField').each(function() {
let fieldName = $(this).attr('name');
let fieldVal = $(this).val();
assoc[fieldName] = fieldVal;
});
(此外,您应该在函数内部使用 let/var/const 初始化您的变量,这样它们就不会泄漏到全局范围内。)
你说name-value但你似乎想要一个对象
你可以做任何一个
// Object
const obj = {};
$('.modalField').each(function() {
const fieldName = $(this).attr('name');
const fieldVal = $(this).val();
obj[fieldName] = fieldVal
});
console.log(obj)
// OR Name-Value pair
const arr = $('.modalField').map(function() {
return {
[$(this).attr('name')]: $(this).val()
}
}).get()
console.log(arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="a" value="1" class="modalField" />
<input name="b" value="2" class="modalField" />
<input name="c" value="3" class="modalField" />
<input name="d" value="4" class="modalField" />
是这样的吗?
var fields = [];
$('.modalField').each(function() {
var name = $(this).attr('name');
var value = $(this).val();
fields.push({ name, value });
});
console.log(fields);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input class="modalField" name="n1" value="v1" />
<input class="modalField" name="n2" value="v2" />
<input class="modalField" name="n3" value="v3" />
</div>
输出:
[
{
"name": "n1",
"value": "v1"
},
{
"name": "n2",
"value": "v2"
},
{
"name": "n3",
"value": "v3"
}
]
我建议您创建一个对象,而不是名称和值数组。
var obj ={};
$('.modalField').each(function() {
obj[$(this).attr('name')] = $(this).val();
});
所以这样你就会得到这样的对象(名称仅用作示例):{"name1":"val1","name2":"val2","name3":"val3"}
我有一个可变元素列表,需要成对获取它们的名称和值(关联数组或对象)。
到目前为止我有以下内容,但如何为每个元素创建名称和值对?
var names = [];
var values = [];
$('.modalField').each(function() {
fieldName = $(this).attr('name');
fieldVal = $(this).val();
names.push(fieldName);
values.push(fieldVal);
});
感谢您的帮助,
汤姆
var assoc = {};
$('.modalField').each(function() {
let fieldName = $(this).attr('name');
let fieldVal = $(this).val();
assoc[fieldName] = fieldVal;
});
(此外,您应该在函数内部使用 let/var/const 初始化您的变量,这样它们就不会泄漏到全局范围内。)
你说name-value但你似乎想要一个对象
你可以做任何一个
// Object
const obj = {};
$('.modalField').each(function() {
const fieldName = $(this).attr('name');
const fieldVal = $(this).val();
obj[fieldName] = fieldVal
});
console.log(obj)
// OR Name-Value pair
const arr = $('.modalField').map(function() {
return {
[$(this).attr('name')]: $(this).val()
}
}).get()
console.log(arr)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input name="a" value="1" class="modalField" />
<input name="b" value="2" class="modalField" />
<input name="c" value="3" class="modalField" />
<input name="d" value="4" class="modalField" />
是这样的吗?
var fields = [];
$('.modalField').each(function() {
var name = $(this).attr('name');
var value = $(this).val();
fields.push({ name, value });
});
console.log(fields);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
<input class="modalField" name="n1" value="v1" />
<input class="modalField" name="n2" value="v2" />
<input class="modalField" name="n3" value="v3" />
</div>
输出:
[
{
"name": "n1",
"value": "v1"
},
{
"name": "n2",
"value": "v2"
},
{
"name": "n3",
"value": "v3"
}
]
我建议您创建一个对象,而不是名称和值数组。
var obj ={};
$('.modalField').each(function() {
obj[$(this).attr('name')] = $(this).val();
});
所以这样你就会得到这样的对象(名称仅用作示例):{"name1":"val1","name2":"val2","name3":"val3"}