我可以在 JavaScript 中选择多维 HTML 数组作为多维数组吗？答案

【问题标题】：Can I select a multi-dimensional HTML array in JavaScript as a multi-dimensional array?我可以在 JavaScript 中选择多维 HTML 数组作为多维数组吗？
【发布时间】：2015-06-29 21:29:09
【问题描述】：

如果我在页面上有以下 HTML：

<input type="hidden" name=item[0][id]>
<input type="text"   name=item[0][title]>
<input type="text"   name=item[0][description]>

<input type="hidden" name=item[1][id]>
<input type="text"   name=item[1][title]>
<input type="text"   name=item[1][description]>

<input type="hidden" name=item[2][id]>
<input type="text"   name=item[2][title]>
<input type="text"   name=item[2][description]>

我想使用 JavaScript（或 JQuery）选择项目，这样我可以使用外部数组遍历项目。

目前我有以下 JQuery/JavaScript 来处理这些项目：

var items = ($('[name*="item["]'));
var i = 0;

while (i < items.length) {

    if (items[i++].value === '') {
        // No ID set.
    }
    else if (items[i++].value === '') {
        // No title set.
    }
    else if (items[i++].value === '') {
        // No description set.
    }
}

有没有办法选择元素，以便我可以使用类似于以下的符号循环遍历它们（其中 items.length 为 3）？

for (var i = 0; i < items.length; i++) {
    if (items[i][0].value === '') {
        // No ID set.
    }
    else if (items[i][1].value === '') {
        // No title set.
    }
    else if (items[i][2].value === '') {
        // No description set.
    }
}

或者更像这样？

for (var i = 0; i < items.length; i++) {
    if (items[i].id.value === '') {
        // No ID set.
    }
    else if (items[i].title.value === '') {
        // No title set.
    }
    else if (items[i].description.value === '') {
        // No description set.
    }
}

或者这是否需要更多的操作和处理才能从 DOM 中选择到创建数据结构以进行循环？

【问题讨论】：

没有“HTML 数组”。这些只是个人输入。您在服务器端看到的看似阵列处理是服务器端环境的一个功能，仅此而已。是的，您当然可以编写一个通用函数，将一组元素传递给该函数将解析name 并填充对象数组。但是你必须写它，没有任何内置的东西。
也许您可以使用类来解决问题，将class="0 id" 添加到您的 html 中，然后使用 document.querySelector(".0.id") 选择它，但是以这种方式使用类可能会使您的页面有点超载，也许它不是最好的方法
@T.J.Crowder 我怀疑可能是这种情况。

标签： javascript jquery html arrays

【解决方案1】：

我认为this 正是您正在寻找的（与选择器无关）：

function serialize () {
    var serialized = {};
    $("[name]").each(function () {
        var name = $(this).attr('name');
        var value = $(this).val();

        var nameBits = name.split('[');
        var previousRef = serialized;
        for(var i = 0, l = nameBits.length; i < l;  i++) {
            var nameBit = nameBits[i].replace(']', '');
            if(!previousRef[nameBit]) {
                previousRef[nameBit] = {};
            }
            if(i != nameBits.length - 1) {
                previousRef = previousRef[nameBit];
            } else if(i == nameBits.length - 1) {
                previousRef[nameBit] = value;
            }
        }
    });
    return serialized;
}

console.log(serialize());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="hidden" name=item[0][id]>
<input type="text"   name=item[0][title]>
<input type="text"   name=item[0][description]>

<input type="hidden" name=item[1][id]>
<input type="text"   name=item[1][title]>
<input type="text"   name=item[1][description]>

<input type="hidden" name=item[2][id]>
<input type="text"   name=item[2][title]>
<input type="text"   name=item[2][description]>

查看相关JSFiddle sample。

【讨论】：

【解决方案2】：

这是一种在 JQuery 中添加自定义函数以获取所需数据结构的方法。

$.fn.getMultiArray = function() {
    var $items = [];
    var index = 0;
    $(this).each(function() {
        var $this = $(this);
        if ($this.attr('name').indexOf('item[' + index + ']') !== 0)
            index++;
        if (!$items[index])
            $items[index] = {};
        var key = $this.attr('name').replace('item[' + index + '][', '').replace(']', '');
        $items[index][key] = $this;
    });
    return $items;
};

var $items = $('input[name^="item["]').getMultiArray();

这使您可以在“理想”示例中获得参考。

var $items = $('input[name^="item["]').getMultiArray();
$items[0].id;

JS 小提琴：https://jsfiddle.net/apphffus/

【讨论】：