javascript - jQuery搜索为h6标签设置HTML，如果为空，则删除并更新源var

我的以下代码读取源数据并在var中设置html，在对其执行操作之前，我需要在HTML源中搜索任何空的h6标签（如果发现有空标签来删除它们并更新源var），以便可以在其他函数中正确处理。

由于编辑器有时会添加空的<h6></h6>，因此会破坏生成的选项卡，因此有时也会执行<h6><span></span></h6>，因此，如果这样的话，也最好将其删除。

工作示例：https://jsfiddle.net/17cw1kg1/
宽度为空的h6，h6子跨度稍微中断：https://jsfiddle.net/17cw1kg1/2/

JS：

$(document).ready(function() {

    var originalTabs = $('.originalTabs').html();
    var windowWidth = 0;
    var swapSpeed = 0;
    var scrollSpeed = 0;

    function clearTabs() {
      $('.originalTabs').html(originalTabs);
    }

    //clearTabs();
    //desktopTabs();

    function desktopTabs() {
      clearTabs();

      // cretate tabs for desktop
      var headers = $("#tab_description h6");

      $('#tab_description h6').each(function(i) {
        $(this).nextUntil("h6").andSelf().wrapAll('<div class="tab" id="tab-' + i + '"/>');
      });

      for (var i = 0; i < headers.length; i++) {
        $('.tabs').append('<li class=""><a href="#tab-' + i + '">' + headers[i].innerHTML + '</a></li>');
      }

      $('ul.tabs').each(function() {
        var active, content, links = $(this).find('a');
        var listitem = $(this).find('li');
        active = listitem.first().addClass('active');
        content = $(active.attr('href'));
        $('.tab').hide();
        $(this).find('a').click(function(e) {
          $('.tab').hide();
          $('ul.tabs li').removeClass('active');

          content.hide();
          active = $(this);
          content = $($(this).attr('href'));
          active.parent().addClass('active');
          content.show();
          return false;
        });
      });

      headers.remove(); // remove headers from description
      $('#tab-0').show(); // show the first tab

      $('#tab_description').show();
    }

    function mobileTabs() {
      clearTabs();

      //alert("loaded mobile");

      var headers = $("#tab_description h6");

      $(headers).each(function(i) {
        $(this).append('<a href="#accordion_' + (i + 1) + '" id="accordion_' + (i + 1) + '"></a>');
        //$(this).nextUntil("h6").andSelf().wrapAll('<div class="aTab" id="tab-'+i+'"/>');
        $(this).on('click tap', function() {
          tabClick($(this));
        });
      });

      $('#tab_description h6').first().addClass("active");
      $('#tab_description h6').first().nextUntil("h6").show();

      $('#tab_description').show();
    }

    var tabClick = function(x) {
      //alert("clicked");
      var accordionContent = $('#tab_description p, #tab_description ul, #tab_description table, #tab_description div');

      //$('#tab_description h6').removeClass("active");
      if (!$(x).hasClass("active")) {
        $(x).addClass("active");
        $('#tab_description h6').removeClass("active");
        $(accordionContent).slideUp(swapSpeed);
        $('#tab_description div > div').show();
        $(x).addClass("active");
        $(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
          //$('body, html').css('height', 'auto');
          scrollToTab($(x));
        });
      } else {
         $('#tab_description h6').removeClass("active");
         if ($(x).next("p").css('display') == 'none') {
          $('#tab_description div > div').show();
          $(x).nextUntil('h6').slideDown(swapSpeed).promise().then(function() {
            //$('body, html').css('height', 'auto');
            scrollToTab($(x));
          });
        } else {
          //$('body, html').css('height', 'auto');
          $(accordionContent).slideUp(swapSpeed);
        }
      }


      return false;

    }

    function scrollToTab(x) {
      $("html, body").animate({
        scrollTop: $(x).offset().top - 10
      }, scrollSpeed);
    }

    //load default
    //$(function() {

      if (isMobileLandscapeOnly.matches || isTabletLandscapeOnly.matches) {
          //alert("Mobile / Tablet (Portrait)");
          desktopTabs();
          //$('#tab_description h6').on("click, tap", tabClick);

          //console.log(originalTabs);
        } else if (isMobilePortraitOnly.matches || isTabletPortraitOnly.matches) {
          //alert("Mobile / Tablet (Portrait)");
          mobileTabs();
          //$('#tab_description h6').on("click, tap", tabClick);

        } else if (isDesktop) {
          //alert("Desktop");
          desktopTabs();
        }

    //});

  });

HTML示例：

<div class="originalTabs">
  <h6>title 1</h6>
  <p>tab 1 content</p>
  <h6>title 2</h6>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <h6>title 3</h6>
  <p>tab 3 content</p>
</div>

JS在上面创建了一个可以使用的生成选项卡，但是如果编辑器中有空白符，那么需要在创建之前检查并删除

<div class="originalTabs">
  <h6>title 1</h6>
  <p>tab 1 content</p>
  <h6><span></span></h6>
  <h6>title 2</h6>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <h6></h6>
  <h6>title 3</h6>
  <p>tab 3 content</p>
</div>

真的，需要找到空的并删除

tpl来源

<div class="originalTabs">

  <ul class="tabs">
    <!--holder for h6 tabs -->
  </ul>

  <div id="tab_description">
    <h6>title 1</h6>
    <p>tab 1 content</p>
    <h6>title 2</h6>
    <p>tab 2 content</p>
    <p>tab 2 content</p>
    <p>tab 2 content</p>
    <h6>title 3</h6>
    <p>tab 3 content</p>
  </div>

</div>

最佳答案

您可以通过该表达式搜索每个没有文本的h6；

 if(!$(this).text().trim().length)

从这个post

如果不起作用，您会看到2个红色边框。

SNIPPET

$('h6').each(function() {
  if(!$(this).text().trim().length) {
    $(this).remove();
  }
});

.empty {
  border: 1px solid red;
  width: 100px;
  height: 50px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="originalTabs">
  <h6>title 1</h6>
  <p>tab 1 content</p>
  <h6 class='empty'><span></span></h6>
  <h6>title 2</h6>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <p>tab 2 content</p>
  <h6 class='empty'></h6>
  <h6>title 3</h6>
  <p>tab 3 content</p>
</div>