Question

我有一个sections列表，其中每个都预制div和button以动态创建新的div。 div总是在它们所在的部分的末尾创建，并且应该在它们在行中的位置而不是它们的创建顺序之后编号。

<section id="section1"><div class="premade">1</div></section>
<button onclick="addRow(1)">Create new</button>
<section id="section2"><div class="premade">2</div></section>
<button onclick="addRow(2)">Create new</button>

我试图动态设置每个数字。当我创建一个新的div时，它应该根据我选择创建它的部分以及此部分已包含的div数加上前面部分的div数来获取它的数量。而不是像我做的那样：

section.innerHTML += '<div class="created"> ' + parseInt(index + R) + '</div>'
R += 1;

我编写的代码在从第一部分到最后一部分创建新div时得到正确的数字，但是当我回到上一部分创建一个新部分时，它失败，因为它不知道现有div的数量部分已经有了。新单位之后的div位置也应该更改为与行中的新位置相匹配。我试图在javascript中找到正确的语法。知道我怎么可能这样做吗？

感谢您的帮助

我的小提琴：https://jsfiddle.net/balleronde/8bx98a0r/

Answer 1

如果我掌握了你真正的意思，我认为你需要为每个部分单独设置一个R变量（计数器）。

假设R1是最顶部的计数器，R2是第2个最顶部的计数器，依此类推。

Answer 2

您应该从“数据”中分割“视图”。

例如，您可以将数据作为对象的列表或数组[{section: "section1", id:1},{section: "section2", id:2}]跟踪，并从该数据“构建”您的HTML。

您只需要更改数组数据，（编辑，插入或删除对象），并调用一个函数从新对象列表中“重建”您的视图。

Answer 3

您不能使用全局R值来分配新的部分，因为无论新部分在何处，都会更新为R + 1.

你应该做的是尝试找到＆＃34; R＆＃34;每次点击按钮后的值。并更新所有新创建的部分。

P.S。使用jQuery可以更轻松。

动态设置行号取决于其位置

3 个答案: