在jquery中创建一个多维数组

Posted 2023-05-09

【中文标题】在jquery中创建一个多维数组

【英文标题】：make a multidimensional array in jquery

【发布时间】：2019-10-31 06:25:07

【问题描述】：

我的html代码是：

    <input class='change_connection' name='test[connection][]' type='checkbox' value="3G">
    <input class='change_connection' name='test[connection][]' type='checkbox' value="wifi">
    <input class='change_platform' name='test[platform][]' value='mobile' type='checkbox'>
    <input class='change_platform' name='test[platform][]' value='desktop' type='checkbox'>
    <input class='change_platform' name='test[platform][]' value='tablet' type='checkbox'>

在 php 中，我用它创建了一个多维数组，如下所示：

    Array
(
    [connection] => Array
        (
            [0] => 3G
            [1] => wifi
        )

    [platform] => Array
        (
            [0] => mobile
            [1] => desktop
            [2] => tablet
        )

)

那么你能帮助在 jquery 中用相同的结构做同样的数组吗？

【参考方案1】：

根据 cmets 中的讨论，答案如下：

// creating the object that will hold the valeues
let groups = 
// querying DOM for the elements we want
const inputList = document.querySelectorAll('input')

// iterating over the query result
for (let item of inputList) 
  // get the value of attribute 'data-group'
  const attribute = item.getAttribute('data-group')
  // if the attribute is not in the groups object,
  // then add with an array
  if (!(attribute in groups)) 
    groups[attribute] = []
  
  // push the value of the value attribute to the array
  groups[attribute].push(item.getAttribute('value'))




// displaying result in the console
console.log(groups)

// regular syntax
console.log('3G from the groups: ', groups.connection[0])
console.log('tablet from the groups: ', groups.platform[2])

// array syntax - multidimensional array
console.log('3G from the groups (array): ', groups['connection'][0])
console.log('tablet from the groups (array): ', groups['platform'][2])

// if the keys in the groups object are not known
// (so you cannot count on calling them by a string),
// then this is how you iterate through the object:
for (let key of Object.keys(groups)) 
  groups[key].forEach(item => 
    console.log(key + ": ", item)
  )

<input class='change_connection' name='test[connection][]' type='checkbox' data-group="connection" value="3G">
<input class='change_connection' name='test[connection][]' type='checkbox' data-group="connection" value="wifi">
<input class='change_platform' name='test[platform][]' data-group="platform" value='mobile' type='checkbox'>
<input class='change_platform' name='test[platform][]' data-group="platform" value='desktop' type='checkbox'>
<input class='change_platform' name='test[platform][]' data-group="platform" value='tablet' type='checkbox'>

与您提供的数据集的一个重要区别是它不仅是data，而且是data-group。在 HTML5 中，将自定义数据添加到 DOM 元素的方法是使用 data-* 前缀，但是您需要将您的名称附加到属性（我将其命名为 group，所以它是 data- HTML 中的组）。

【参考方案2】：

你试过了吗：

// this is an object that has arrays in it
const object = 
  connection: ['3G', 'wifi'],
  platform: ['mobile', 'desktop', 'tablet']


// calling a value:
console.log(object.connection[0]) // expected output: 3G
console.log(object.platform[1]) // expected output: desktop

这不是一个多维数组（当然，在底层它是），而是一个包含数组的 javascript 对象。

这也是一个有效的调用（只是为了看看它是一个多维数组）：

console.log(object['platform'][0]) // expected output: mobile

【讨论】：

你好。我需要像循环这样的东西来从 DOM 中收集价值。还是谢谢

哦，好的 - 但是您的问题表单中的 HTML 是您想要的数组吗？

在该 HTML 中，您没有“连接”和/或“平台”的标签 - 它只能从 class 或 name 道具中挖掘。这是一个正确的假设吗？从哪一个会更好？或者您可以在包含此信息的复选框中添加data-something 吗？

对不起。如果您谈论选择器，那么使用哪个或什么都没有关系？

这是关于分组的。创建一个组是可以的，但是如果您想要这些组的特定名称（动态），那么它们必须从可靠的来源设置 - 一个不会改变的来源，并且其中包含所有必需的数据。