jQuery：通過 class 循環元素並創建關聯數組

Question

我有一個可變的元素列表，需要成對獲取它們的名稱和值（關聯數組或對象）。

到目前為止，我有以下內容，但如何為每個元素創建名稱和值對？

var names = [];
var values = [];

$('.modalField').each(function() {
    fieldName = $(this).attr('name');
    fieldVal = $(this).val();
    
    names.push(fieldName);
    values.push(fieldVal);
});

謝謝你的幫助，
湯姆

Answer 1

使用括號表示法。

var assoc = {};
$('.modalField').each(function() {
    let fieldName = $(this).attr('name');
    let fieldVal = $(this).val();
    assoc[fieldName] = fieldVal;
});

（此外，您應該在 function 中使用 let/var/const 初始化變量，這樣它們就不會泄漏到全局 scope 中。）

Answer 2

您說名稱-值，但您似乎想要一個 object

你可以做任何一個

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

Answer 3

像這樣的東西？

 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>

Output：

[
  {
    "name": "n1",
    "value": "v1"
  },
  {
    "name": "n2",
    "value": "v2"
  },
  {
    "name": "n3",
    "value": "v3"
  }
]

Answer 4

我建議您創建一個 object，而不是名稱和值數組。

var obj ={};
$('.modalField').each(function() {
    obj[$(this).attr('name')] = $(this).val();
   
});

因此，這樣您將擁有像這樣的 object（名稱僅用作示例）： {"name1":"val1","name2":"val2","name3":"val3"}