用户单击时如何在 Dart 中转置 html 个元素

Question

我有一个或多个 html 元素的集合，如下所示：

<div class="input-group symbol-group">
    <span class="input-group-addon symbol"></span>
    <input type="number" class="form-control" id="cost" />
</div>

在页面的更上方，我有一个 TextInputElement 可以将任何 span.symbol 的文本更改为其中输入的任何内容（即 £、$ 等）。到目前为止，还不错。

我想要做的是，根据用户选择，将这些范围中的任何一个与相应的 TextInputElement 交换，以便 span.symbol 出现 after TextInputElement（或 before 如果已选择 after。

我该怎么做？

编辑：对不起，我忘了添加我当前的代码（有效但假设元素中只有 2 children）：

<Element>
..onClick.listen((Event e) {
    querySelectorAll('div.symbol-group').forEach((DivElement e) {
        Element e1 = e.children.first;
        Element e2 = e.children.elementAt(1);

        e.children.clear();
        e.append(e2);
        e.append(e1);


    });
});

Answer 1

我仍然无法理解你想要完成的事情。
看看我的尝试并评论它如何还没有做你需要的。

..onClick.listen((Event e) {
    querySelectorAll('div.symbol-group').forEach((DivElement e) {
        Element e1 = e.querySelector('span.input-group-addon.symbol');
        Element e2 = e.querySelector('input.form-control');
        int i1 = e.indexOf(e1);
        int i2 = e.indexOf(e2);

        if(i1 < i2) {
          e1.remove();
          e.insert(i1, e1);
        }
    });
});

用户单击时如何在 Dart 中转置 html 个元素

How to transpose html elements in Dart when user clicks

dart

dart-html