Alterna jQuery mostrar / ocultar elementos após um certo número de elementos correspondentes
Ao implementar a pesquisa facetada, se o número de opções for 7 ou menos, mostrarei todas elas. Se o número de opções exceder 7, mostrarei apenas as 5 primeiras e insira um link que alternará a exibição dessas opções.
Minha pergunta neste caso é: como percorrer a lista de elementos correspondentes, neste casoli
é que caem dentro.facet ul
e execute esta função. Em segundo lugar, eu preciso.appendTo()
ali
no fim de.facet ul
que exibe o texto com base no fato de eu mostrar ou não todos.
Se estiver mostrando tudo, quero que o texto leia "... Menos opções". Se estou mostrando alguns, gostaria que o texto fosse "...n Mais escolhas".
Um empurrão na direção certa para cada uma dessas funções ou uma explicação completa é muito apreciada.
Código abaixo para referência.
<div class="facet">
<h4>Brands</h4>
<ul>
<li><a class="all" href="#">Really long brand name facet to show what happens with multi-line facets <em>(63)</em></a></li>
<li><a class="all" href="#">Joe Rocket <em>(57)</em></a></li>
<li><a class="all" href="#">Icon <em>(42)</em></a></li>
<li><a class="all" href="#">Fieldsheer <em>(37)</em></a></li>
<li><a class="all" href="#">Tour Master <em>(21)</em></a></li>
<li><a class="all" href="#">AGV Sport<em>(21)</em></a></li>
<li><a class="all" href="#">Alpinestars<em>(21)</em></a></li>
<li><a class="all" href="#">Cortech<em>(21)</em></a></li>
<li><a class="all" href="#">Element<em>(21)</em></a></li>
<li><a class="all" href="#">Fieldsheer<em>(21)</em></a></li>
<li><a class="all" href="#">Firstgear<em>(21)</em></a></li>
<li><a class="all" href="#">FMF Apparel<em>(21)</em></a></li>
<li><a class="all" href="#">Icon<em>(21)</em></a></li>
<li><a class="all" href="#">Joe Rocket<em>(21)</em></a></li>
<li><a class="all" href="#">O'Neal Racing<em>(21)</em></a></li>
<li><a class="all" href="#">Power Trip<em>(21)</em></a></li>
<li><a class="all" href="#">REV'IT!<em>(21)</em></a></li>
<li><a class="all" href="#">River Road<em>(21)</em></a></li>
<li><a class="all" href="#">Rockstar<em>(21)</em></a></li>
<li><a class="all" href="#">Scorpion<em>(21)</em></a></li>
<li><a class="all" href="#">Shift Racing<em>(21)</em></a></li>
<li><a class="all" href="#">Speed and Strength<em>(21)</em></a></li>
<li><a class="all" href="#">Spidi<em>(21)</em></a></li>
<li><a class="all" href="#">Teknic<em>(21)</em></a></li>
<li><a class="all" href="#">Tour Master<em>(21)</em></a></li>
<li><a class="all" href="#">Troy Lee Designs<em>(21)</em></a></li>
<li><a class="all" href="#">Vega<em>(21)</em></a></li>
<li><a class="all" href="#">Yoshimura<em>(21)</em></a></li>
<li><a class="all" href="#">Z1R<em>(21)</em></a></li>
</ul>
</div>
A classe 'all' é irrelevante aqui e serve a outro propósito. Sinta-se livre para desconsiderá-lo.