Невозможно получить jQuery для правильного отображения или скрытия элементов

Question

Почему это в сценарии 1 Я не могу получить скрытое пространство, чтобы исчезнуть, когда я показываю или скрываю элементы или даже когда я помещаю «display: none» в качестве стилей? Но в сценарии 2 он работает отлично? Что я делаю не так? Ниже приводится изображение кода в действии:

Сценарий 1:

<script> 
    $(document).ready(function() { 
     // if there are more than 4 posts, hide all after 4 and show the 'show more' link 
     if($('a').length >= 4) { 
      $('a').slice(4).hide(); 
      $("#showMore").show(); 

      // below display's 'show more' link. when clicked displays hidden comments and hides 'show more' link 
      $("#showMore").click(function() { 
       $('a').slice(4).show(); 
       $("#showMore").hide(); 
      }); 
     } 
    }); 
</script> 

<a>test </a><br> 
<a>fed </a><br> 
<a>fdes </a><br> 
<a>grr </a><br> 
<a>rerf </a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 
<a style="display: none">dferf</a><br> 

<span id="showMore" href="javascript:void(0)" style="display: none">Show More</span> 

Сценарий 2:

<p id="example">This is an example of text that will be shown and hidden.</p> 

<input type="button" value="Hide" onclick="$('#example').hide()" /> 
<input type="button" value="Show" onclick="$('#example').show()" /> 

Answer 1

вы можете использовать gt селектор:

Выделите все элементы с индексом, большим, чем индекс в согласованном наборе.

$('a:gt(4)').hide(); 

вместо <br/> тега, который добавляет дополнительное пространство, вы можете использовать display: block для якорных тегов:

a { 
    display: block 
}