循环错误开启<fieldset>标签 - 在它应该之前插入结束标签

Question

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

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

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

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

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

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

1. 首先是容器 div

 <div id="learners">Loading...</div>

2. 用于获取数据并用它替换上面的容器 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>

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

结果

Answer 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++; } }