jquery - jQuery hide が正しく機能しない

Question

私の質問は最初に 2 つあります。以下のコードには、.fbs スクリプトを削除すると.fbsと.twsの 2 つのクラスが含まれます。私はワードプレスループ内で作業しています。私のhtml/phpは次のようになります:(明らかにもっとありますが、これは問題のある部分です)

HTML:

<div class="social-team-list">
<ul>
<?php echo '<li class="fbs'.$i.'">'?><a href="<?php the_field('facebook_url'); ?>">
<img     src="/wp-content/images/fb-team.png"></a></li>
<?php echo '<li class="tws'.$i.'">'?><a href="<?php the_field('twitter_url'); ?>">
<img   src="/wp-content/images/tw-team.png"></a></li>
</ul>
</div>

出力は次のようになります。

<div class="social-team-list">
<ul>
<li class="fbs1">
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>
</li>
<li class="tws1">
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a>
</li>
</ul>
</div>

<div class="social-team-list">
<ul>
<li class="fbs2">
<a href="https://www.facebook.com/whatever"><img src="/wp-content/images/fb-team.png"></a>
</li>
<li class="tws2">
<a href="https://twitter.com/whatever"><img src="/wp-content/images/tw-team.png"></a>
</li>
</ul>
</div>

jQuery:

<script>
 $(document).ready(function(){
  if ($(".fbs1").html().length < 58) {
 $('.fbs1').hide();
 }                                           
 if ($(".fbs2").html().length < 58) {
 $('.fbs2').hide();
 }                                           
 if ($(".fbs3").html().length < 58) {
 $('.fbs3').hide();
  }                                           
 if ($(".fbs4").html().length < 58) {
 $('.fbs4').hide();
  } 
  if ($(".tws1").html().length < 58) {
 $('.tws1').hide();
  }
  if ($(".tws2").html().length < 58) {
 $('.tws2').hide();
  } 
  if ($(".tws3").html().length < 58) {
 $('.tws3').hide();
  } 
  if ($(".tws4").html().length < 58) {
 $('.tws4').hide();
  }                                               
 });
</script>

私の質問の 2 番目の部分は、これを機能させることができると仮定して、このスクリプトを作成するより効率的な方法はありますか?

私のjqueryスキルは良くないので、何か間違ったことをしていると確信しています。