Невозможно скрыть навигационные вкладки, если содержимое его вкладки пуст

Question

Я использую bootstrap nav-tabs, где, если содержимое вкладки пуста, я не хочу показывать вкладку.

У меня есть DEMO, где он скрывает вкладку. Я написал это для конкретной вкладки (используя id).

Проблема в том, что у меня больше вкладок, поэтому я реализовал использование класса. Но я не могу получить результат.

Demo of My problem

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
    <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
    <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
    <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active" id="home" class="EmptyFind">Home</div> 
    <div class="tab-pane" id="profile" class="EmptyFind"></div> 
    <div class="tab-pane" id="messages" class="EmptyFind">Message</div> 
    <div class="tab-pane" id="settings" class="EmptyFind">Settings</div> 
</div> 

Jquery

$(document).ready(function() { 
    $(".EmptyFind").each(function() { 
    var $tid = $(this).attr("id"); 
    var $txt = $(this).text(); 
    var $tohide = $("#myTab").find($('a[data-target=#+'$tid ']')); 
    if ($txt == "") { 
     $('a[data-target=#+'$tid']').closest('li').hide(); 
    } 
    }); 

}) 

Answer 1

Вы добавили два класса atrribute так делают один

 <ul class="nav nav-tabs" id="myTab"> 
      <li class="active"><a data-target="#home" data-toggle="tab">Home</a></li> 
      <li><a data-target="#profile" data-toggle="tab">Profile</a></li> 
      <li><a data-target="#messages" data-toggle="tab">Messages</a></li> 
      <li><a data-target="#settings" data-toggle="tab">Settings</a></li> 
     </ul> 

     <div class="tab-content"> 
      <div class="tab-pane active EmptyFind" id="home">Home</div> 
      <div class="tab-pane EmptyFind" id="profile" ></div> 
      <div class="tab-pane EmptyFind" id="messages" >Message</div> 
      <div class="tab-pane EmptyFind" id="settings">Settings</div> 
     </div> 

JQuery:

   $(document).ready(function() { 
         $(".EmptyFind").each(function() { 
         var $tid = $(this).attr("id"); 
         var $txt = $(this).text(); 
         if ($txt == "") {        
          $('a[data-target=#'+$tid+']').closest('li').hide(); 
         } 
         }); 

       }); 

Answer 2

Вот рабочий код:

<script> 
$(document).ready(function() { 
    $(".EmptyFind").each(function() { 
    var tid = $(this).attr("id"); 
    var txt = $(this).text(); 
    if (txt == "") { 
     $("a[data-target=" + tid + "]").parent().hide(); 
    } 
    }); 

}) 
</script> 

<ul class="nav nav-tabs" id="myTab"> 
    <li class="active"><a data-target="home" data-toggle="tab">Home</a></li> 
    <li><a data-target="profile" data-toggle="tab">Profile</a></li> 
    <li><a data-target="messages" data-toggle="tab">Messages</a></li> 
    <li><a data-target="settings" data-toggle="tab">Settings</a></li> 
</ul> 

<div class="tab-content"> 
    <div class="tab-pane active EmptyFind" id="home">Home</div> 
    <div class="tab-pane EmptyFind" id="profile"></div> 
    <div class="tab-pane EmptyFind" id="messages">Message</div> 
    <div class="tab-pane EmptyFind" id="settings">Settings</div> 
</div> 

Вы должны были это ошибки:

• Вы определяете атрибут класса дважды на вкладках.
• Вы выбираете, чтобы получить Элемент для скрытия был неправильным из-за # знака и конкатенации строк заканчивается ошибкой синтаксиса.