如何在jQuery循环中匹配特定条件的首尾项并新增div？

实现方案 #

你可以先提前遍历一次接口返回的列表，收集所有type为Hidden的项的索引，拿到首尾符合条件的项的位置后，再在原来的渲染循环里做判断即可，完整代码如下：

// 第一步：预处理数据，收集所有Hidden类型项的索引
const hiddenIndexes = []
$.each(obj.dynamicList, function(i, v) {
  if(v.type === 'Hidden') {
    hiddenIndexes.push(i)
  }
})
// 判空：如果不存在符合条件的Hidden项直接跳过后续逻辑
if(hiddenIndexes.length > 0) {
  const firstHiddenIdx = hiddenIndexes[0]
  const lastHiddenIdx = hiddenIndexes[hiddenIndexes.length - 1]

  // 原来的渲染逻辑
  $.each(obj.dynamicList, function(i, v){
      var label    = v['label'];
      var name     = v['id'];
      var value    = v['value'];
      var required = v['required'];
      var type     = v['type'];
      var list     = v['list'];

      if(v['type'] == "Input" && v['id'] == "email" ){
          $('#part3_append_form').append("<div class='form-group'><label class='ssjob-label'>"+ label +"</label><input type='email' class='form-control' "+ (required == 'Y' ? 'required': '') + "  id='"+ name +"' name='"+ name +"' value='"+ email +"'></div>");
      
      }else if( v['type'] == "Hidden"){
        // 判断当前是不是第一个Hidden，是则先追加开头的div
        if(i === firstHiddenIdx) {
          $('#part3_append_form').append("<div class='自定义类名'>你需要新增的开头div内容</div>")
        }
        $('#part3_append_form').append("<input type='hidden' class='form-control' name='"+ name +"' value='"+ value +"'>");
        // 判断当前是不是最后一个Hidden，是则追加结尾的div
        if(i === lastHiddenIdx) {
          $('#part3_append_form').append("<div class='自定义类名'>你需要新增的结尾div内容</div>")
        }
      
      }else{
          $('#part3_append_form').append("<div class='form-group'><label class='ssjob-label'>"+ label +"</label><input type='text' "+ (required == 'Y' ? 'required': '') + " class='form-control' id='"+ name +"' name='"+ name +"' value='"+ value +"'></div>");
      } 
  });
}

逻辑说明 #

• 两次遍历的性能损耗可以忽略，绝大多数场景下接口返回的表单项数量都不会超过千级，不会有性能问题
• 提前做了空判断，当接口返回没有Hidden类型的项时不会触发额外逻辑，避免报错
• 你可以根据实际需求调整div插入的位置：如果需要把所有Hidden项包裹在同一个div里，就把开头div放在第一个Hidden之前插入，结尾div放在最后一个Hidden之后插入即可。

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