javascript - 如果不存在内容，则隐藏 Bootstrap 中的选项卡

Question

我尝试过使用this thread ，但我无法让它为我工作。当我使用这个脚本时，无论是否有“p”标签，它都会隐藏选项卡。我做错了什么？

<div id="product-tabs">
<ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="active"><a href="#tab1" role="tab" data-content-id="tab1" data-toggle="tab">Description</a><div class="active-border"></div></li>
    <li class="border-none"><a href="#tab2" role="tab" data-content-id="tab2" data-toggle="tab">Features &amp; Specs</a><div class="active-border"></div></li>
    <li><a href="#tab3" role="tab" data-toggle="tab" data-content-id="tab3" class="warranty-tab">Warranty</a><div class="active-border"></div></li>
        <li class="reviews-tab"><a href="#tab4" role="tab" data-content-id="tab4" data-toggle="tab">Expert Reviews</a><div class="active-border"></div></li>

  <div class="clear"></div>



</ul>


<!-- Tab panes -->
  <div class="tab-content">
  <div class="tab-pane fade in active" id="tab1">
    <div id="product-description" class="rte">

      <div class="">{{ product.description }}</div>
      <div class="">{{ product.metafields.custom_fields.ProductFeatures }}</div>
    </div>
  </div>
  <div class="tab-pane fade" id="tab2">
    <div id="product-description" class="rte">
      {{ product.metafields.custom_fields.ProductMoreInfo }}
    </div>
  </div>
  <div class="tab-pane fade" id="tab3">
    <div id="product-description" class="rte">
      {{ product.metafields.custom_fields.Warrantee }}
    </div>
  </div>
    <div class="tab-pane fade" id="tab4">
    <div id="product-description" class="rte">
      {{ product.metafields.custom_fields.ExpertReviews }}
    </div>
  </div> 

这是我从其他线程借来的脚本，并根据我的需要进行了修改。任何帮助将不胜感激!

  <script>
// for each tab link
$('li.reviews-tab a').each(function() {
// does it's related div (by content id) not have a p element?
if ($('#tab4' + $(this).data('content-id') + ' > p').length == 0) {
    // if not, find the link's parent li element and hide it
    $(this).parent('li.reviews-tab').hide();
}
});
    </script>

Answer 1

如果我正确理解了你的 javascript 的注释，你将需要这样的东西。

// for each tab link
$('#product-tabs a').each(function() {

    // does it's related div (by content id) not have a p element?
    if ($('#' + $(this).data('content-id')).has('p').length == 0) {

        // if not, find the link's parent li element and hide it
        $(this).closest('li').hide();
    }
});