无法编辑HTML时，如何隐藏Divi中空内容的标签页及内容

使用Divi内置的Tabs模块为产品页每个标签页分配了自定义字段，当字段内容为空时（如无视频内容），希望隐藏对应的标签（如“Videos”标签）及其div内容，但无法编辑HTML。自行编写的jQuery代码无法实现需求，寻求解决办法。

原代码及页面结构 #

原jQuery代码 #

$(document).ready(function() {
  $(".et_pb_tabs_controls").each(function() {
    var $tabclass = $(this).addClass('et_pb_tab');
    var $txt = $(this).text();
    
    if ($txt == "") {
      $('a[data-target=#' + $tabclass + ']').closest('div').hide();
    }
  });
});

页面HTML结构 #

<div class="et_pb_module et_pb_tabs et_pb_tabs_0_tb_body et_slide_transition_to_1 et_slide_transition_to_2 et_slide_transition_to_3 et_slide_transition_to_5 et_slide_transition_to_0">
  <ul class="et_pb_tabs_controls clearfix">
    <li class="et_pb_tab_0_tb_body et_pb_tab_active" style="height: 50.5938px;"><a href="#">Description</a></li>
    <li class="et_pb_tab_1_tb_body" style="height: 50.5938px;"><a href="#">Specifications</a></li>
    <li class="et_pb_tab_2_tb_body" style="height: 50.5938px;"><a href="#">Videos</a></li>
    <li class="et_pb_tab_3_tb_body" style="height: 50.5938px;"><a href="#">Downloads</a></li>
    <li class="et_pb_tab_4_tb_body" style="height: 50.5938px;"><a href="#">What's Included</a></li>
    <li class="et_pb_tab_5_tb_body" style="height: 50.5938px;"><a href="#">Compare Similar</a></li>
  </ul>
  <div class="et_pb_all_tabs">
    <div class="et_pb_tab et_pb_tab_0_tb_body clearfix et_pb_active_content et-pb-active-slide" style="z-index: 1; display: block; opacity: 1;">Tab 1 Product Description </div>
    <div class="et_pb_tab et_pb_tab_1_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 2 content </div>
    <div class="et_pb_tab et_pb_tab_2_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 3 content </div>
    <div class="et_pb_tab et_pb_tab_3_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 4 content </div>
    <div class="et_pb_tab et_pb_tab_4_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 5 content </div>
    <div class="et_pb_tab et_pb_tab_5_tb_body clearfix" style="z-index: 1; display: none; opacity: 0;"> Tab 6 content </div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>

• 遍历对象错误：原代码遍历的是整个标签控制栏的ul元素，而非单个标签li
• 类名处理错误：给ul添加et_pb_tab类，且$tabclass获取的是jQuery对象而非类名字符串
• 内容判断错误：判断的是ul的文本内容，而非对应标签页内容区域的文本
• 选择器错误：页面结构中没有data-target属性，标签与内容通过相同的类名关联，原选择器不符合实际结构

$(document).ready(function() {
  // 遍历每个标签控制项
  $(".et_pb_tabs_controls li").each(function(index) {
    // 通过索引匹配对应的内容区域
    var $tabContent = $(".et_pb_all_tabs .et_pb_tab").eq(index);
    // 去除内容首尾空白后判断是否为空
    var contentText = $.trim($tabContent.text());
    
    if (contentText === "") {
      // 隐藏当前标签
      $(this).hide();
      // 隐藏对应的内容区域
      $tabContent.hide();
    }
  });

  // 可选：处理隐藏标签后的默认激活逻辑，保证页面显示正常
  var $visibleTabs = $(".et_pb_tabs_controls li:visible");
  if ($visibleTabs.length > 0 && !$visibleTabs.hasClass("et_pb_tab_active")) {
    // 激活第一个可见标签
    $visibleTabs.first().addClass("et_pb_tab_active");
    // 显示对应内容并切换激活状态
    var activeIndex = $visibleTabs.first().index();
    $(".et_pb_all_tabs .et_pb_tab").eq(activeIndex)
      .addClass("et_pb_active_content et-pb-active-slide")
      .show();
    $(".et_pb_all_tabs .et_pb_tab").not(":eq(" + activeIndex + ")")
      .removeClass("et_pb_active_content et-pb-active-slide")
      .hide();
  }
});

• 遍历每个标签li，通过索引精准匹配对应的内容区域div
• 使用$.trim()去除内容首尾空白字符，避免空格、换行导致的误判
• 内容为空时同时隐藏标签控制项和对应的内容区域
• 可选的默认激活逻辑：若原激活标签被隐藏，自动激活第一个可见标签，确保页面正常显示

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