переключатель jQuery показывает/скрывает элементы после определенного числа соответствия элементов
В реализации фасетного поиска, если число вариантов равняется 7 или меньше, я покажу им всем. Если число вариантов превысит 7, то я покажу первые 5 только и вставлю ссылку, которая переключит дисплей этих опций.
Мой вопрос в этом случае, как пробежать список соответствия элементам в этом случае liэто находится в пределах .facet ul, и выполните эту функцию. Во-вторых, я должен .appendTo() li в конце .facet ul это отображает текст на основе того, показываю ли я все или некоторых.
При показе всех я хочу, чтобы текст читал "... Меньше Вариантов". Если бы я показываю немногим, я хотел бы, чтобы текст считал "... n Больше Вариантов".
Нажатие в правильном направлении для каждой из этих функций или полное объяснение очень ценится.
Код ниже для ссылки.
<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>
'Весь' класс не важен здесь и служит другой цели. Не стесняйтесь игнорировать его.
3 ответа
Вы ищете селектор : gt :
$('.facet').each(function() {
var ul = $('ul', this);
if(ul.children('li').size() <= 7) return;
var hiddenElements = ul.children('li:gt(4)', this).hide();
var showCaption = '...' + hiddenElements.size() + ' More Choices';
ul.append(
$('<li class="toggler">' + showCaption + '</li>')
.toggle(
function() {
hiddenElements.show();
$(this).text('...Fewer Choices');
},
function() {
hiddenElements.hide();
$(this).text(showCaption);
}
)
);
});
DEMO
Вот начало:
$(document).ready(
function(){
var count=0;
$('div.facet ul li').each(
function(){
if(++count == 7){
$(this).parent().append('<li><a href="">Click here for more...</a></li>');
}
else if(count > 7){
$(this).css('display','none');
}
}
);
}
);
мои два цента
$('.facet li').each(function(x) {
var warn = ''
if($('.facet li').length > 7){
if (x >= 5){
$(this).hide();
}
warn = '.. Fewer Choices';
}else{
$(this).show();
warn = 'test to append if less than 7 than seven';
}
if ($('#warn').length == 0){
$('.facet ul').append('<li id="warn"></li>');
}
$('#warn').text(warn);
});