在 jquery 中创建一个多维数组

Question

我的 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中用相同的结构做相同的数组吗？

Answer 1

根据评论中的讨论，以下是答案：

// 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，因此它在 HTML 中是data-group）。

Answer 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