Hide everything except three li with nth

Navigation
1

I am using a list that I use for paging, and it is so long that I would like to hide all of them except the previous one, current and next. For example: 

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
</ul>

Another example: 

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li> <!-- Ocultar -->
    <li>5</li> <!-- Ocultar -->
    <li>6</li> <!-- Ocultar -->
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
    <li>11</li> <!-- Ocultar -->
    <li>12</li> <!-- Ocultar -->
    <li>13</li>
    <li class="active">14</li>
    <li>15</li>
    <li>16</li> <!-- Ocultar -->
    <li>17</li> <!-- Ocultar -->
    <li>18</li> <!-- Ocultar -->
    <li>19</li> <!-- Ocultar -->
    <li>20</li> <!-- Ocultar -->
    <li>21</li> <!-- Ocultar -->
    <li>22</li> <!-- Ocultar -->
    <li>23</li> <!-- Ocultar -->
    <li>24</li> <!-- Ocultar -->
    <li>25</li> <!-- Ocultar -->
</ul>

Can it be with nth or another selector?

    
asked by tomillo 29.05.2018 в 23:20
source

4 answers

1

Well the quickest thing I can think of is the following: 

$().ready(()=>{
  $('li:not(.active)').css('display','none');
  $active = $('li.active');
  $active.next().css('display','');
  $active.prev().css('display','');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<ul>
    <li>1</li> <!-- Ocultar -->
    <li>2</li> <!-- Ocultar -->
    <li>3</li> <!-- Ocultar -->
    <li>4</li>
    <li class="active">5</li>
    <li>6</li>
    <li>7</li> <!-- Ocultar -->
    <li>8</li> <!-- Ocultar -->
    <li>9</li> <!-- Ocultar -->
    <li>10</li> <!-- Ocultar -->
</ul>
    
answered by 30.05.2018 / 00:25
source
1

According to your example of what happens to me in the following way, we will use some properties of jquery and we will use the following:

  • eq used to select an element as if it were an array.
  • lt that will have to select all the elements of a previous list of the element.
  • gt that will have to select all the elements of a list from the element that we will select with click
  • show that we will use to show the elements.
  • hide that we will use to hide the elements.
  • index that we will use to obtain the current position.

With all that explained we go to the result. !!!! 

$("ul li").click(function(){
  
    $(this).addClass('active')
    var indice = $(this).index();
    if(indice == 0){
       $("ul li:eq("+(indice+1)+")").addClass("active").show();
       $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
      
    }else{
      $("ul li:eq("+(indice+1)+")").addClass("active").show();
      $("ul li:eq("+(indice-1)+")").addClass("active").show();
    
      $("ul li:lt("+(indice-1)+")").removeClass("active").hide();
      $("ul li:gt("+(indice+1)+")").removeClass("active").hide();
    }
    
});
.active {
  color: white;
  background-color: red;
}
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>

<ul>
  <li>1</li>
  <!-- Ocultar -->
  <li>2</li>
  <!-- Ocultar -->
  <li>3</li>
  <!-- Ocultar -->
  <li>4</li>
  <!-- Ocultar -->
  <li>5</li>
  <!-- Ocultar -->
  <li>6</li>
  <!-- Ocultar -->
  <li>7</li>
  <!-- Ocultar -->
  <li>8</li>
  <!-- Ocultar -->
  <li>9</li>
  <!-- Ocultar -->
  <li>10</li>
  <!-- Ocultar -->
  <li>11</li>
  <!-- Ocultar -->
  <li>12</li>
  <!-- Ocultar -->
  <li>13</li>
  <li>14</li>
  <li>15</li>
  <li>16</li>
  <!-- Ocultar -->
  <li>17</li>
  <!-- Ocultar -->
  <li>18</li>
  <!-- Ocultar -->
  <li>19</li>
  <!-- Ocultar -->
  <li>20</li>
  <!-- Ocultar -->
  <li>21</li>
  <!-- Ocultar -->
  <li>22</li>
  <!-- Ocultar -->
  <li>23</li>
  <!-- Ocultar -->
  <li>24</li>
  <!-- Ocultar -->
  <li>25</li>
  <!-- Ocultar -->
</ul>

What really matters in the example is the jquery , where we will first obtain the position of our element using the property index , then assign it to a variable to later make the logic of selecting the elements that are on the side and hide the others. Explained more detailed, what I get is a number to make $(this).index(); , with that number say that using eq I select the items on the side since the list in jquery believes it is an array therefore subtract a position and add a position to allow yourself to section.

I hope you serve greetings !!!

    
answered by 30.05.2018 в 00:22
1

With jQuery you can hide all li before and after the asset like this: 

$(".active").nextAll().hide();
$(".active").prevAll().hide();

And then you only show the previous one and the following one: 

$(".active").next().show();
$(".active").prev().show();
    
answered by 30.05.2018 в 15:46
0

0 vote against

I would recommend a label that already exists removing all the li. It is also much faster and I think it can be useful, although I do not know what your project is about. the details tag is displayed with a click. 

<details>
 <summary>lo que vas a mostrar o lo que se ve </summary>
 <p>contenido oculto</p>
 <p>contenido oculto</p>
 <p>contenido oculto</p>
</details>

Alomejor is less professional, but it also depends on how you do it in css and such. I would recommend dividing it into divs. a greeting.

    
answered by 31.05.2018 в 21:14
Why does not the data annotation StringLength [] and MaxValuie [] work for me? copy files to another folder with php