Question

如果我在页面上有以下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到创建数据结构再循环？

Answer 1

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

＆＃13;

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());

＆＃13;

<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]>

＆＃13;

请参阅相关的JSFiddle sample。

Answer 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();

这允许您在＆＃34;理想＆＃34;中使用引用。示例

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

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

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

2 个答案: