我可以在JavaScript中选择一个多维HTML数组作为多维数组吗

Can I select a multi-dimensional HTML array in JavaScript as a multi-dimensional array?

本文关键字：数组 HTML 一个 JavaScript 选择 我可以      更新时间：2023-09-26

如果页面上有以下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中进行选择到创建要循环的数据结构，这是否需要更多的操作和处理？

我认为这正是您想要的（与选择器无关）：

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示例。

这里有一种方法可以将自定义函数添加到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 Fiddle：https://jsfiddle.net/apphffus/

相关文章：