如果没有文本/内容 jQuery，则隐藏选项卡

Question

我正在尝试使用 jQuery 隐藏没有内容的选项卡。我认为这会相对容易，但似乎无法让它发挥作用。任何指针将不胜感激。

到目前为止，这是我的 jQuery ...

jQuery( document ).ready( function( $ ) {
    $('.tab-type-custom').each( function(e) {
        if( !$.trim( $(this).find('row').html() ).length ) {
            var ID = $(this).attr('id');
            $( '#'+ ID + '_toggle').hide()
        }
    });
});

这些是我的标签

<div class="profile-menu">
   <ul id="descriptionTab" class="cts-carousel" style="position: relative;">
      <li> <a id="listing_tab_profile_toggle" data-section-id="profile" class="listing-tab-toggle toggle-tab-type-main" data-options="{}"> Profile </a> </li>
      <li class="active"> <a id="listing_tab_brands_toggle" data-section-id="brands" class="listing-tab-toggle toggle-tab-type-custom" data-options="{}"> Brands </a> </li>
      <li> <a id="listing_tab_dry-goods_toggle" data-section-id="dry-goods" class="listing-tab-toggle toggle-tab-type-custom" data-options="{}"> Dry Goods </a> </li>
      <li> <a id="listing_tab_reviews_toggle" data-section-id="reviews" class="listing-tab-toggle toggle-tab-type-comments" data-options="{}"> Reviews </a> </li>
   </ul>
</div>

这是选项卡的内容（为简单起见，其中两个）。一个有内容，另一个没有 content/text，只有 HTML.

<!-- This is my tab content -->
<div class="tab-content listing-tabs">

    <!-- .tab-type-custom / has content / (also is active tab) -->
    <section class="profile-body listing-tab tab-type-custom tab-layout-content-sidebar pre-init tab-active" id="listing_tab_brands">
    <div class="container tab-template-content-sidebar">
        <div class="row ">
            <div class="col-md-7">
                <div class="row cts-column-wrapper cts-left-column">
                <div class="col-md-12 block-type-terms" id="block_x1G2pTC">
                    <div class="element">
                        <div class="pf-head">
                            <div class="title-style-1">
                            <h5>  Brands  </h5>
                            </div>
                        </div>
                        <div class="pf-body">
                            <div class="listing-details item-count-8">
                                <p>

                                     Some content

                                </p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-12 block-type-text" id="block_Lomkw5V">
                    <div class="element content-block plain-text-content">
                        <div class="pf-head">
                            <div class="title-style-1">
                                <h5>  More content  </h5>
                            </div>
                        </div>
                        <div class="pf-body">
                            <p>

                                Some content

                            </p>
                            <p>

                                Some content

                            </p>
                        </div>
                    </div>
                </div>
                </div>
            </div>
        </div>
    </div>
    </section>

    <!-- .tab-type-custom / has NO content / Trying to hide - as no content, just HTML -->

    <section class="profile-body listing-tab tab-hidden tab-type-custom tab-layout-content-sidebar pre-init" id="listing_tab_dry-goods">
    <div class="container tab-template-content-sidebar">
        <div class="row ">
            <div class="col-md-7">
                <div class="row cts-column-wrapper cts-left-column"> </div>
            </div>
            <div class="col-md-5">
                <div class="row cts-column-wrapper cts-right-column"> </div>
            </div>
        </div>
    </div>
    </section>

</div>

Answer 1

您应该使用 !$.trim($(this).find('.row.cts-left-column').html()).length，因为许多 .row 可以使它成为一个好的选择器。

演示

jQuery(document).ready(function($) {
  $('.tab-type-custom').each(function(e) {
    if (!$.trim($(this).find('.row.cts-left-column').html()).length) {
      var ID = $(this).attr('id');
      $('#' + ID + '_toggle').hide()
    }
  });
});

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

<div class="profile-menu">
  <ul id="descriptionTab" class="cts-carousel" style="position: relative;">
    <li> <a id="listing_tab_profile_toggle" data-section-id="profile" class="listing-tab-toggle toggle-tab-type-main" data-options="{}"> Profile </a> </li>
    <li class="active"> <a id="listing_tab_brands_toggle" data-section-id="brands" class="listing-tab-toggle toggle-tab-type-custom" data-options="{}"> Brands </a> </li>
    <li> <a id="listing_tab_dry-goods_toggle" data-section-id="dry-goods" class="listing-tab-toggle toggle-tab-type-custom" data-options="{}"> Dry Goods </a> </li>
    <li> <a id="listing_tab_reviews_toggle" data-section-id="reviews" class="listing-tab-toggle toggle-tab-type-comments" data-options="{}"> Reviews </a> </li>
  </ul>
</div>
<!-- This is my tab content -->
<div class="tab-content listing-tabs">

  <!-- .tab-type-custom / has content / (also is active tab) -->
  <section class="profile-body listing-tab tab-type-custom tab-layout-content-sidebar pre-init tab-active" id="listing_tab_brands">
    <div class="container tab-template-content-sidebar">
      <div class="row ">
        <div class="col-md-7">
          <div class="row cts-column-wrapper cts-left-column">
            <div class="col-md-12 block-type-terms" id="block_x1G2pTC">
              <div class="element">
                <div class="pf-head">
                  <div class="title-style-1">
                    <h5> Brands </h5>
                  </div>
                </div>
                <div class="pf-body">
                  <div class="listing-details item-count-8">
                    <p>

                      Some content

                    </p>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-12 block-type-text" id="block_Lomkw5V">
              <div class="element content-block plain-text-content">
                <div class="pf-head">
                  <div class="title-style-1">
                    <h5> More content </h5>
                  </div>
                </div>
                <div class="pf-body">
                  <p>

                    Some content

                  </p>
                  <p>

                    Some content

                  </p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>

  <!-- .tab-type-custom / has NO content / Trying to hide - as no content, just HTML -->

  <section class="profile-body listing-tab tab-hidden tab-type-custom tab-layout-content-sidebar pre-init" id="listing_tab_dry-goods">
    <div class="container tab-template-content-sidebar">
      <div class="row ">
        <div class="col-md-7">
          <div class="row cts-column-wrapper cts-left-column"> </div>
        </div>
        <div class="col-md-5">
          <div class="row cts-column-wrapper cts-right-column"> </div>
        </div>
      </div>
    </div>
  </section>

</div>

如果没有文本/内容 jQuery，则隐藏选项卡

Hiding tab if no text / content with jQuery

javascript

jquery

tabs