How to limit the number of displayed objects through jQuery?

Question

There is a list of displayed filters, you need to display only the first 2 of them, the rest are revealed by clicking on the "watch more" button, and in the open block there was a button that again collapses the list with the text "hide".

Tried to do so:

var filit = 2; // - количество отображаемых новостей hidefilit = "- скрыть старые новости"; showfilit = "+ показать все новости"; $(".archive").html(showfilit); $(".fil-it:not(:lt(" + filit + "))").hide(); $(".archive").click(function(e) { e.preventDefault(); if ($(".news:eq(" + filit + ")").is(":hidden")) { $(".fil-it:hidden").show(); $(".archive").html(hidefilit); } else { $(".fil-it:not(:lt(" + filit + "))").hide(); $(".archive").html(showfilit); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-box-list"> <div class="news fil-it"> Пункт 1 </div> <div class="news fil-it"> Пункт 2 </div> <div class="news fil-it"> Пункт 3 </div> <div class="news fil-it"> Пункт 4 </div> <div class="news fil-it"> Пункт 5 </div> <a class="archive" href="#"></a> </div> <div class="filter-box-list"> <div class="news fil-it"> Пункт 6 </div> <div class="news fil-it"> Пункт 7 </div> <div class="news fil-it"> Пункт 8 </div> <div class="news fil-it"> Пункт 9 </div> <div class="news fil-it"> Пункт 10 </div> <a class="archive" href="#"></a> </div>

I figured out the code, but I encountered the following problem: how to make this code work within the .filter-box-list block?
I will have several such blocks, and I need it to work independently of the others.
I understand that I can give a class to each parent and knock on it, but is such a decision correct?

Accepted Answer · 2016-10-31T14:58:22

 var filit = 2; // - количество отображаемых новостей hidefilit = "- скрыть старые новости"; showfilit = "+ показать все новости"; $(".archive").html(showfilit); $(".fil-it:nth-child(n + " + (filit + 1) + ")").hide(); $(".archive").click(function(e) { e.preventDefault(); if ($(this).siblings(".news:eq(" + filit + ")").is(":hidden")) { $(this).siblings(".fil-it:hidden").show(400); $(this).html(hidefilit); } else { $(this).siblings(".fil-it:nth-child(n + " + (filit + 1) + ")").hide(400); $(this).html(showfilit); } });

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-box-list"> <div class="news fil-it"> Пункт 1 </div> <div class="news fil-it"> Пункт 2 </div> <div class="news fil-it"> Пункт 3 </div> <div class="news fil-it"> Пункт 4 </div> <div class="news fil-it"> Пункт 5 </div> <a class="archive" href="#"></a> </div> <div class="filter-box-list"> <div class="news fil-it"> Пункт 6 </div> <div class="news fil-it"> Пункт 7 </div> <div class="news fil-it"> Пункт 8 </div> <div class="news fil-it"> Пункт 9 </div> <div class="news fil-it"> Пункт 10 </div> <a class="archive" href="#"></a> </div>

just in the show() and hide() parameters, specify the number of milliseconds - I updated the code and set 400 for example
And one more question, if it does not make it difficult to answer .. I'm trying to insert code into the html variable, but it is not displayed.
showfilit = "<i class =" fa fa-plus "aria-hidden =" true "> </ i> view more";
can you create an example of what doesn't work on CodePen, JSBin or JSFiddle?

Answer 2 · 2016-10-31T14:34:14

You can try this:

 var filit = 2; // - количество отображаемых новостей hidefilit = "- скрыть старые новости"; showfilit = "+ показать все новости"; var text=''; for(var x=0;x < 10 ;x++){ if(x>1){ text +="<div class='news fil-it no_active'>Пункт " + (x+1) + "</div>"; }else{ text +="<div class=' fil-it'>Пункт " + (x+1) + "</div>"; } } text += "<br><span class='toggle'>>>>> click me </span>"; $(".filter-box-list").append(text); $(".no_active").hide(); $(".active").show(); $(".toggle").click(function(){ $(".news").toggle("no_active"); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-box-list"> </div>

UPD:

 $(".no_active").hide(); $(".active").show(); $(".toggle").click(function(){ $(".news").toggle("no_active"); })

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="filter-box-list"> <div class=" fil-it"> Пункт 1 </div> <div class=" fil-it"> Пункт 2 </div> <div class="news fil-it no_active"> Пункт 3 </div> <div class="news fil-it no_active"> Пункт 4 </div> <div class="news fil-it no_active"> Пункт 5 </div> <div class="news fil-it no_active"> Пункт 6 </div> <div class="news fil-it no_active"> Пункт 7 </div> <div class="news fil-it no_active"> Пункт 8 </div> <div class="news fil-it no_active"> Пункт 9 </div> <div class="news fil-it no_active"> Пункт 10 </div> <br> <span class="toggle"> >>>> click me </a> </div>

@ Alexander did not understand what the difference was, but he added no dynamic ..

How to limit the number of displayed objects through jQuery?

2 answers 2

More articles: