jQuery Mobile循环渲染<fieldset>时闭合标签提前插入问题

问题原因 #

• jQuery的append()方法传入零散HTML片段时，浏览器会自动补全未闭合的标签：你刚插入开标签<fieldset class="ui-grid-b">，浏览器就会自动补上闭合标签，后续插入的复选框区块会成为fieldset的同级元素，而非子元素，最后手动插入的</fieldset>属于无效冗余内容，直接导致布局错乱。
• 原代码索引逻辑存在bug：外层for循环自带i++，内层循环又手动执行i++，会跳过1/3的学员数据，你贴的异常DOM里id从learner2直接跳到learner4就是这个问题导致的。

修复方案 #

不要拆分标签逐段插入，先把每一行包含开标签、复选框区块、闭合标签的完整HTML拼接为完整字符串，再一次性插入DOM，从根源避免浏览器自动补全标签的问题；同时修正索引逻辑，兼容学员总数不是3的倍数的场景；动态插入内容后调用jQuery Mobile的样式渲染方法，保证组件样式正常。

修复后的完整功能代码如下：

// 页面加载完成后拉取学员数据
$(function() {
  google.script.run
    .withSuccessHandler(showLearners)
    .getLearnerData();
});

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

  // 按每行3个规则遍历所有学员
  while (index < totalCount) {
    // 拼接当前行完整HTML，不拆分零散标签插入
    var rowContent = '<fieldset class="ui-grid-b">';
    for (var colIndex = 0; colIndex < 3 && index < totalCount; colIndex++) {
      var learnerName = learners[index][0];
      var checkboxId = 'learner' + index;
      rowContent += 
        '<div class="ui-block-' + cols[colIndex] + '">' +
          '<input type="checkbox" name="learner" id="' + checkboxId + '" data-mini="true">' +
          '<label for="' + checkboxId + '">' + learnerName + '</label>' +
        '</div>';
      index++;
    }
    rowContent += '</fieldset>';
    // 一次性插入整行DOM
    $learnerCheckboxes.append(rowContent);
  }

  // 刷新jQuery Mobile动态组件样式
  $learnerCheckboxes.enhanceWithin();
}

预期效果 #

6个学员复选框会自动分为2行，每行3个等宽排布，fieldset标签会正确包裹每行的3个复选框区块，不会出现提前闭合问题，也不会漏数据、出现id重复。
参考排布效果：

内容的提问来源于stack exchange，提问作者DJP