javascript - js如何批量修改隐藏域的name值？

Question

我需要给后台传一组array数据，隐藏域是这样的： {代码...} 一条列表是一组数据，第一维的key是递增的，第二维是一样的 我的问题是：这个时候我删除一条数据，我希望将后面的数据补到前面来，例如，删除第二条数...

高洛峰 · Answer

假设我们的结构是下面这样的

我们可以大刀阔斧的重新计算一遍

$('.js-person').each(function(i) {
    $(this).find('.js-name').attr('name', 'attr[' + i + '][name]');
    $(this).find('.js-age').attr('name', 'attr[' + i + '][age]');
    $(this).find('.js-tel').attr('name', 'attr[' + i + '][tel]');
});

天蓬老师 · Answer

每次的传的数据如果是一样的话，为什么不能分次传呢？

高洛峰 · Answer

为啥非得搞个input出来？你用js的变量去处理不是更好？

高洛峰 · Answer

javascriptvar attr = [
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  },
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  },
  {
    "name":"a1",
    "age" :"b2",
    "tel" : "b3"
  }

]

像这样不是更能满足你的需求嘛？

如果是form表单提交的话，可以使用FormData.append()方法把数据加进去和表单里别的字段一起提交。

如果一定要渲染dom的话，可以用类似handlebars这样的模板引擎，然后与数据做单向绑定，数据更新==>dom更新，这样也有利于数据的获取啊~

PHP中文网 · Answer

按照你的意思，我大概用 js + jQuery 写个算法，不过就偷个懒不去运行调试了

首先，目标是第一维，就是 attr[n] 这一维，这个 attr 暂且称为第一维的名称。如果页面里只第一维的名称只有一个，会比较好处理，先来处理这种情况。

另外，这一部分是比较规则的，假设它们的容器 ID 是 container，这样方便限制上下文。

javascriptint index = -1;     // 新的 index，第1次使用时会 +1 所以从 -1 开始
int lastIndex = -1; // 检查旧的 index 变化，初始要与所有已使用的 index 不同，所以 -1

// 找到所有 container 下的 input[type=hidden]，遍历处理名称
// 这里假设所有 input[type=hidden] 的第一维序号是顺序的（不乱）
$("#container input[type=hidden]).each(function() {
    var input = $(this)

    // 取出 name，用正则表达式把第一维 name，序号 和剩余部分拆分开来，
    // 比如 attr[0][name] 拆出来是
    // ["attr[0][name]", "attr", "0", "[name]"]
    var m = input.attr("name").match(/^(.*?)$$(\d+)$$(.*)$/)

    var name = m[1]
    var currentIndex = ~~m[2]    // 当前序号，转换成整数

    // 当前序号与上次序号不等，说明序号已经变化，需要对 index 增加
    if (currentIndex != lastIndex) {
        index++
        lastIndex = currentIndex
    }

    // 拼新的 name
    var newName = name + "[" + index + "]" + m[3]
    input.attr("name", newName)
})

如果这些有多个第一维名称，那需要将上面的函数封装，同时将 index 和 lastIndex 封装到一个对象中，作个映射表，每次取得 name 之后都从映射表里把 { index, lastIndex } 对象取出来进行处理。这个情况要复杂得多，如果你没理解我们再讨论。

javascript - js如何批量修改隐藏域的name值？

reply all(5)I'll reply