Списки и :gt() селектор
Есть задача.
Нужно скрыть все li у которых индекс больше 4 Есть структура <div class="filter_item"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> </ul> </div> Пробую так
jQuery(document).ready(function($){
var selector_elem = ".filter_item ul";
var item_index = 4;
$(selector_elem).each(function(){
var items_count = $(selector_elem).children().length;
if (items_count >= item_index) {
$(selector_elem+" li:gt("+item_index+")").hide();
}
});
});
но как результат получаю либо все скрытыми, либо скрываются все li которые находятся в 2 и 3-ем списках :-E Что странно при использовании .nth-child(n) скрывается нужный в всех списках. |
$('.filter_item ul').each(function(){
$('li:gt(3)', this).hide();
});
индекс - с нуля, ну сам знаешь. |
Цитата:
|
Ещё попутный вопрос.
Добавляю ссылку в конец списка
if ($(this, 'li').children().length > 5) {
$(this, ':last').append('<li><a href="javascript:void(0);" class="tr_more">More...</a></li>');
}
далее обрабатываю
$('a.tr_more').toggle(function(){
$('???').show();
$(this).attr('class', 'tr_less').text("Less...");
}, function(){
$(this).attr('class', 'tr_more').text("More...");
});
как мне обратиться к родительскому элементу списка, чтобы при клике на ссылку показывались li только того блока ul в котором кликнули на ссылку, а не всех сразу? |
$(this).closest('li').siblings().show()
|
Цитата:
...}, function(){
var ul = $(this).closest('li').siblings();
$('.filter_item '+ul+' li:gt(2)').hide();
$(this).attr('class', 'tr_more').text("More...");
});
вроде бы получаем же родительский элемент списка? да и ссылка тоже скрывается(он же последний элемент списка) :( |
var ul = $(this).closest('li').siblings();
ul - тут является коллекцией объектов, а не строкой. Поэтому так: '.filter_item '+ul+' li:gt(2)' неверно. Еще ссылку как то странно ты добавляешь: $(this, ':last').append работает что ли так? |
Цитата:
переделал так
$('.tr_more').toggle(function(){
$(this).closest('li').siblings().show();
$(this).attr('class', 'tr_less').text("Less...");
}, function(){
$('.filter_item ul').each(function(){
$('li:gt(2)', this).hide();
if ($(this, 'li').children().length > 3) {
$(this, ':last').show();
}
});
});
работает но один раз и только на том элементе на котором кликнули :blink: |
| Часовой пояс GMT +3, время: 01:23. |