$(document).ready(function() { var a = $('div.wrapper > a'); var wid = a.length; for( var i = 0; i < wid; i+=8 ) { a.slice(i, i+8).wrapAll('<div class="slide"></div>'); }; $(".pro").click(function() { $(".pro1").toggle('hide'); return false; }); }); 
 .slide{ background: red; margin: 4px; } 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div class="wrapper"> <a href="#"><img src="#" /></a> <a href="#" class="pro1"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> </div> <a href="" class="pro">Клик</a>

There is such a code. It is necessary that when the button is pressed, length is recalculated and the 8th picture is added to the first block when it disappears from this block.

enter image description here

This is how it should work when you click

Closed due to the fact that it is necessary to reformulate the question so that it is possible to give an objectively correct answer to the participants of Mr. Black , aleksandr barakin , user194374, Streletz , lexxl Jul 27 '16 at 12:52 .

The question gives rise to endless debates and discussions based not on knowledge, but on opinions. To get an answer, rephrase your question so that it can be given an unambiguously correct answer, or delete the question altogether. If the question can be reformulated according to the rules set out in the certificate , edit it .

  • I do not understand anything. In the block of 13 pictures, I press the button and one is removed, it becomes 12. I press again and the 13th will be added again - Mr. Black
  • If you need to get the number of non-hidden blocks $('.wrapper a:visible').length - Mr. Black
  • When I click on "Click", the element with the pro1 class is hidden. In the first red block one picture disappears. It is necessary that after the disappearance of pro1 was recalculated how many total elements in $ ('div.wrapper> a'). Hide must be considered. - Entrol Artim
  • What does it mean to be taken into account? Ie it does not count if it is hidden? - Mr. Black
  • If I understand correctly, hide the picture and the length should be 12 pictures? - Mr. Black

1 answer 1

Updated length at the end of the animation.
You can get all visible elements in this way $('.wrapper a:visible')

eq() is the string order, eq(0) upper, eq(1) is lower

 var a = $('div.wrapper > a'); wid = a.length; for(i=0; i<wid; i+=8) { a.slice(i, i+8).wrapAll('<div class="slide"></div>'); } $(".pro").click(function() { $(".pro1").toggle('hide', function() { wid = $('.slide').eq(0).find('a:visible').length; }); return false; }); $('button').click(function() { console.log(wid); }); 
 .slide{ background: red; margin: 4px; } 
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script> <div class="wrapper"> <a href="#"><img src="#" /></a> <a href="#" class="pro1"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> <a href="#"><img src="#" /></a> </div> <a href="" class="pro">Клик</a> <button>Длина</button>

  • When an element with a picture is hidden, in the upper red block there should be all the same 8 elements, and in the lower one it should decrease, that is, 4 elements, because one of the bottom was moved up. In each <div class = "slide"> </ div> there should be strictly 8 elements, of course, if they are all 8, and if there are more. you can see that another <div class = "slide"> </ div> is being created and so on - Entrol Artimov
  • @ EntrolArtimov, what is needed now? - Mr. Black
  • Attached gifku in the first post. - Entrol Artim
  • @ EntrolArtimov, this is not a recalculation of length at all, it is a transfer of the image from the bottom to the top. The question must be correctly formulated - Mr. Black
  • Updated gif, should move - Entrol Artimov