Как сделать переход к оставшимся отфильтрованным элементам блока?

Question

[Mist_01]

Есть элементы которые фильтруются с помощью меню в верхнем углу.

Нужно сделать что бы в десктопной версии всегда отображалось 8 элементов(как на картинке). Кнопка more и стрелочки видны если в выбранном табе более 8 элементов если меньше, то её не видно.

Например выбран фильтр 'all' - все элементы, но всего элементов 10. Будут показаны 8 элементов и стрелочки для перелистывания к оставшимся 2м
В планшетной версии все то-же самое кроме того что стразу показано 9 элементов.

понять хотя бы как реализовать это, т.к. в JQuery не силен.


Само меню

<div class="block-header-nav">
							<ul>
								<li class="someLi filter-line hover" id="All">All</li>
								<li class="someLi hover" id="Thor-s">Thor’s hammers</li>
								<li class="someLi hover" id="Axes">Axes</li>
								<li class="someLi hover" id="Rings">Rings</li>
								<li class="someLi hover" id="Pendants">Pendants</li>
								<li class="someLi hover" id="Chains">Chains</li>
								<li class="someLi hover" id="Gold">Gold</li>
							</ul>
							<div class="block-header-right-nav">
										<input type="button" class="search">
										<input type="button" class="arrow" id="left-arrow">
										<span>More</span>
										<input type="button" class="arrow" id="right-arrow">
							</div>
</div>

и блоки

<div class="block-items">
    <div class="filter All Thor-s"><a href=""><img src="img/block_items.png" alt="items">																	<h4>Viking Skull Ring Massive Solid</h4>
																		<Span class="item-price">USD 2888.00</Span>
																		<Span class="item-old-price">USD 2888.00</Span>
																		<Span class="item-discount">(10% off)</Span>
																		<p class="free_shipping">Free shipping</p></a>	
																	</div>
																	<div class="filter All Thor-s"><a href="#"><img src="img/block_items.png" 	alt="items">
																		<h4>Viking Skull Ring Massive Solid</h4>
																		<Span class="item-price">USD 2888.00</Span>
																		<Span class="item-old-price">USD 2888.00</Span>
																		<Span class="item-discount">(10% off)</Span>
																 		<p class="free_shipping">Free shipping</p>	
																	</div></a>										
																	<div class="filter All Thor-s"><a href="#"><img src="img/block_items.png"	alt="items">
																	<h4>Viking Skull Ring Massive Solid</h4>
																		<Span class="item-price">USD 2888.00</Span>
																		<Span class="item-old-price">USD 2888.00</Span>
																		<Span class="item-discount">(10% off)</Span>
																		<p class="free_shipping">Free shipping</p></a>	
																	</div>
																	<div class="filter All Thor-s"><a href="#"><img src="img/block_items.png" alt="items">
																	<h4>Viking Skull Ring Massive Solid</h4>
																		<Span class="item-price">USD 2888.00</Span>
																		<Span class="item-old-price">USD 2888.00</Span>
																		<Span class="item-discount">(10% off)</Span>
																		<p class="free_shipping">Free shipping</p></a>	
																	</div>
</div>

Answer 1

[Леонид Нимченко]

Выбираешь элементы, соответственно фильтру, сохраняешь в переменную, на пример nodes. Потом делаешь цикл нужного диапазона 0-7 или 0-8. И в цикле делаешь: nodes.eq(i).show();. Перед этим скрываешь все.