<fieldset> 标签上的循环错误 - 在应该之前插入结束标签答案

【问题标题】：Loop error on <fieldset> tags - inserting closing tag before it should<fieldset> 标签上的循环错误 - 在应该之前插入结束标签
【发布时间】：2022-08-02 18:39:32
【问题描述】：

作为我在 Google Apps 脚本中构建的网络应用程序的一部分，我正在尝试创建一个复选框字段，该字段为每个学习者/学生显示一个复选框，以 3 行排列。学习者数据取自电子表格（这个位工作正常）。

我希望复选框看起来像这样：

6 个复选框的图像，2 行，每行 3

我遇到的问题是我的代码将关闭字段集标记插入错误的位置（太早），因此复选框看起来不正确（我使用的是 jquery mobile 1.4.5 框架）。

我一直盯着代码和修补它几个小时，我希望它是一些我看不到的简单的东西，并希望有人可以帮助我修复它。

我使用的代码基本上是一个嵌套循环——外循环应该为每一行创建字段集标签，内循环应该创建每个复选框。我的代码如下：

首先是容器 div

&lt;div id=\"learners\"&gt;Loading...&lt;/div&gt;

获取数据并用它替换上面的容器 div 的 javascript...

// The code in this function runs when the page is loaded.
  $(function() {
    google.script.run.withSuccessHandler(showLearners)
        .getLearnerData();
  });

  function showLearners(learners) {
    var learnerCheckboxes = $(\'#learners\');
    learnerCheckboxes.empty();
    var cols=[\'a\',\'b\',\'c\'];

    for (var i = 0; i < learners.length; i++) {
      learnerCheckboxes.append(\"<fieldset class=\\\"ui-grid-b\\\">\");

      for (var j = 0; j < 3; j++) {
        learnerCheckboxes.append(
          \"<div class=\\\"ui-block-\" + cols[j] + \"\\\">\" +
            \"<input type=\\\"checkbox\\\" name=\\\"learner\\\" id=\\\"learner\" + i + \"\\\" data-mini=\\\"true\\\">\" +
            \"<label for=\\\"learner\" + i + \"\\\">\" + learners[i][0] + \"</label>\" +
          \"</div>\"
        );
        i++
      }

      learnerCheckboxes.append(\"</fieldset>\");
    }
  }

问题是，当代码运行时，关闭</fieldset> 插入得太早了......这是这段代码的输出：

<div id=\"learners\">
  <fieldset class=\"ui-grid-b\">
  </fieldset><!-- THIS IS THE PROBLEM - IT SHOULD BE AT THE BOTTOM OF THIS GROUP?-->
  <div class=\"ui-block-a\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner0\" data-mini=\"true\">
    <label for=\"learner0\">David</label>
  </div>
  <div class=\"ui-block-b\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner1\" data-mini=\"true\">
    <label for=\"learner1\">Dominic</label>
  </div>
  <div class=\"ui-block-c\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner2\" data-mini=\"true\">
    <label for=\"learner2\">Eliza</label>
  </div>
  
  <fieldset class=\"ui-grid-b\">
  </fieldset><!-- THIS SHOULD BE AT THE BOTTOM OF THIS GROUP-->
  <div class=\"ui-block-a\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner4\" data-mini=\"true\">
   <label for=\"learner4\">Francois</label>
  </div>
  <div class=\"ui-block-b\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner5\" data-mini=\"true\">
    <label for=\"learner5\">James</label></div>
  <div class=\"ui-block-c\">
    <input type=\"checkbox\" name=\"learner\" id=\"learner6\" data-mini=\"true\">
    <label for=\"learner6\">Louise</label>
  </div>
</div>

我不确定empty() 和append() 来自哪里，但不应该将复选框附加到<fieldset>。现在你正在追加到<div id=\"learners\">Loading...</div>。
empty() 和 append() 是 Jquery 移动函数 - 参见例如 api.jquery.com/append。你是对的 - 复选框应该附加到字段集 - 但由于我不知道要提前创建多少个字段集（这是针对用户数量动态变化的情况）我需要以编程方式创建这些。这就是为什么我在外循环中使用带有字段集打开和关闭标签的嵌套循环，然后在内循环中在它们之间插入复选框......或者这就是我试图做的原因（但失败了）
只是在玩这个，可能会发生一些事情，也许是 jequery mobile，我不明白。如果我在结束 </fieldset> 标记之前添加一行以插入一些文本...像这样：\'learnerCheckboxes.append(\"**\");\\nlearnerCheckboxes.append(\"</fieldset>\ ");``
只是玩弄这个，可能会发生一些事情，也许是 jequery mobile，我不明白。如果我在结束 </fieldset>... learnerCheckboxes.append(\"**\"); 之前添加一行以插入一些文本learnerCheckboxes.append(\"</fieldset>\");输出仍然在复选框之前和两个 **\ 之前插入结束 </fieldset> 标记 - 这些按预期插入到复选框之后。我不明白为什么除了猜测 jquerymobile 或 google 应用程序脚本正在强制关闭 <fieldset>...

标签： javascript jquery forms google-apps-script

【解决方案1】：

因为我不使用 jquery，所以需要大量的试验和错误。我用老式的方式来做。但我终于让它工作了。您可以使用 CSS 使其看起来像您想要的那样。

HTML_Test.html

<!DOCTYPE html>
<html>
  <head>
    <base target="_top">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  </head>
  <body>
    <div id="learners">Loading...</div>
    <script>
      (function() {
        google.script.run.withSuccessHandler(showLearners).getLearnerData();
      })();

      function showLearners(learners) {
        var learnerCheckboxes = $('#learners');
        learnerCheckboxes.empty();
        var cols=['a','b','c'];
        let i = 0;
        while( i < learners.length ) {
          let id = "fieldset"+i;
          let fieldset = $('<fieldset class="ui-grid-b" id="'+id+'"></fieldset>')
          learnerCheckboxes.append(fieldset);

          for (var j = 0; j < 3; j++) {
            let div = $('<div class="ui-block-' + cols[j] + '"></div>')
            fieldset.append(div);
            id = "learner"+i;
            let input = $('<input type="checkbox" name="learner" id="' + id + '" data-mini="true">');
            let label = $('<label for="' + id + '">' + learners[i][0] + '</label>' );
            div.append(input);
            div.append(label);
            i++;
            if( i === learners.length ) break;
          }

        }
      }
    </script>
  </body>
</html>

代码.gs

function getLearnerData() {
  try {
    Logger.log("In getLearnerData");
    return [["Dave"],["Tom"],["Larry"],["Mary"],["Joe"],["Sam"],["John"]];
  }
  catch(err) {
    Logger.log("Error in getLearnerData: "+err);
  }
}

结果

【讨论】：

这不是我一直在寻找的 UI 设计，但是您为字段集动态创建唯一 ID 的想法是我需要的灵感。然后，我可以使用该唯一 ID 在布置复选框的内部循环中使用 append 函数。

【解决方案2】：

感谢TheWizEd 动态命名字段集标签的想法 - 这就是导致解决方案的原因。通过动态创建字段集 ID，我可以使用内部循环在字段集标记之间附加复选框。这是代码：

function showLearners(learners) {
  var learnerCheckboxes = $('#learners');
  learnerCheckboxes.empty();
  var cols=['a','b','c'];
  var rowCount = 1;

  for (var i = 0; i < learners.length; i++) {
    //in this next line, use rowCount to create a unique fieldset id
    learnerCheckboxes.append("<fieldset class=\"ui-grid-b\" id=\"checkRow" + rowCount + "\"></fieldset>");
    //then grab it
    var checkRow = $("#checkRow" + rowCount)
    for (var j = 0; j < cols.length; j++) {
      //and append the checkboxes to the newly created fieldset
      checkRow.append(
        "<div class=\"ui-block-" + cols[j] + "\">" +
          "<div class=\"ui-checkbox ui-mini\">" +
            "<label for=\"learner" + i + "\" class=\"ui-btn ui-corner-all ui-btn-inherit ui-btn-icon-left ui-checkbox-off\">" + 
              learners[i][0] + "</label>" +
            "<input type=\"checkbox\" name=\"learner\" id=\"learner" + i + "\" data-mini=\"true\">" +
          "</div>" +
        "</div>"
      );
      i++;//we're in the inner loop, so have to manually increment i
    }
    rowCount++;
  }
}

【讨论】：