如何在SharePoint 2013列表中隐藏空列的Null文本？

嘿，我来帮你搞定这个SharePoint列表模态框里显示null和空内容的麻烦！你之前尝试的代码没效果，主要是因为遍历逻辑有问题，而且事后修改DOM不如从根源上避免生成无效内容来得靠谱。

修改后的完整代码 #

var buildModal = function(items) { 
  var modalContent = $('#modalContent'); 
  for (let i = 0; i < items.length; i++) { 
    // 逐个判断字段是否为空或null，只生成有内容的HTML片段
    let dreamHtml = items[i].Dream && items[i].Dream !== "null" ? `<p><strong>A dream I have is to:</strong> ${items[i].Dream}</p>` : '';
    let learnHtml = items[i].Learn && items[i].Learn !== "null" ? `<p><strong>You would be surprised to learn that I:</strong> ${items[i].Learn}</p>` : '';
    let mottoHtml = items[i].Motto && items[i].Motto !== "null" ? `<p><strong>My motto is:</strong> ${items[i].Motto}</p>` : '';
    let missionHtml = items[i].Mission && items[i].Mission !== "null" ? `<p><strong>The mission of our agency is:</strong> ${items[i].Mission}</p>` : '';
    let prioritiesHtml = items[i].Priorities && items[i].Priorities !== "null" ? `<p>${items[i].Priorities}</p>` : '';
    let accomplishmentsHtml = items[i].Accomplishments && items[i].Accomplishments !== "null" ? `<p>${items[i].Accomplishments}</p>` : '';
    let agencyHtml = items[i].Agency && items[i].Agency !== "null" ? `<div class="agency"><h5>One thing you did not know about our agency is:</h5><p>${items[i].Agency}</p></div>` : '';
    // 处理链接：确保Link存在且有有效URL，同时兼容Website字段为空的情况
    let linkHtml = items[i].Link && items[i].Link.Url ? `<div class="mt-3 mb-3"><a href="${items[i].Link.Url}" target="_blank">${items[i].Website || items[i].Link.Url}</a></div>` : '';

    var modalContentCard = `
      <div class="modal fade" id="basicExample${items[i].ID}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
          <div class="modal-content">
            <div class="modal-header">
              <h5 class="modal-title" id="exampleModalLabel"><strong>${items[i].Title}</strong></h5>
              <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
              </button>
            </div>
            <div class="modal-body">
              <h5>Personal:</h5>
              ${dreamHtml}
              ${learnHtml}
              ${mottoHtml}
              ${missionHtml}
              <hr>
              <h5>Our current priorities are:</h5>
              ${prioritiesHtml}
              <h5>Our biggest accomplishments in the past year include:</h5>
              ${accomplishmentsHtml}
              ${agencyHtml}
              ${linkHtml}
            </div>
            <div class="modal-footer">
              <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
            </div>
          </div>
        </div>
      </div>`; 
    modalContent.prepend(modalContentCard); 
  } 
};

关键改动说明 #

1. 从根源避免无效内容：不再先生成所有<p>标签再去隐藏，而是在拼接HTML前判断每个字段是否为null或空值，只有有有效内容时才生成对应的标签，这样页面上不会出现空的<p>或者带null的文本。
2. 修复之前代码的问题：你之前的$.each循环犯了两个错误：
   • 回调函数的参数顺序搞反了，$.each的第一个参数是索引，第二个才是DOM元素；
   • 只判断了文本为空格的情况，没处理null的场景，而且可能DOM还没完全插入到页面，导致选择器找不到元素。
3. 健壮性优化：对链接部分做了兼容，如果Link字段不存在或者没有Url，就不生成链接的div；如果Website字段为空，就用链接的URL作为显示文本。

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