Я не могу найти живое количество элементов после запуска скрипта несколько раз

109
15

У меня есть список элементов. При щелчке по ссылке я хочу отфильтровать элементы по классу. (пока все в порядке). Проблема: если нет элементов с этим классом, я хочу напечатать сообщение об этом.

$('.filterEventsLinks a').click(function(){
// count total number of events
var evCount = $('.singleEvent').length;

// a list of comma-separated class names to filter are stored in the data attribute of the fired element
// for example: <a data-category="kids,teens,adults" href="#"></a>
var cats = $(this).data('category');

// split into an array
var catArr = cats.split(',');

// loop through
for(var i in catArr) {
var cat = '.CAT-' + catArr[i];

// hide things that do not have this category
$('.singleEvent').not(cat).slideUp(200);
// show things that do
$(cat).slideDown(200);

}

// count number of remaining visible elements
var evCount = $('.singleEvent').filter(':visible').length;

// do more...
});

Все здесь работает так, как ожидалось, за исключением последней строки. Последняя строка, которая, похоже, не работает. Он всегда возвращает количество существующих элементов, а не число, которое в настоящее время видимо.

Та же проблема, указанная в этом вопросе SO: подсчитайте количество элементов в списке после слайд-шоу/slidedown

спросил(а) 2021-01-25T17:25:10+03:00 4 месяца, 3 недели назад
1
Решение
89

Вместо того, чтобы перебирать категории в атрибуте data, вы можете создать селектор, который будет соответствовать всем им одновременно:

$('.filterEventsLinks a').click(function(){    
var cats = $(this).data('category');
//create a selector to match the categories
var selector = '.CAT-' + cats.split(',').join(',.CAT-');

//get filtered elements
var $elems = $(selector);
// hide things that do not have this category
$('.singleEvent').not($elems).slideUp(200);
// show things that do
$elems.slideDown(200);

// count number of remaining visible elements
var evCount = $elems.length;
});

ответил(а) 2021-01-25T17:25:10+03:00 4 месяца, 3 недели назад
76

Вы должны будете подсчитать элементы после завершения анимации. Когда элементы оживляют, они все еще видны или вы можете просто сохранить элементы в коллекции и подсчитать, что:


$('.filterEventsLinks a').click(function(){
var evCount = $('.singleEvent').length,
cats = $(this).data('category').split(','),
elems = $([]);

$.each(cats, function(_, cat) {
var _cat = $('.CAT-' + cat);
$('.singleEvent').not(_cat).slideUp(200);
_cat.slideDown(200);
elems = elems.add(_cat);
}

// you're sliding all .singleEvent elements except "elems" up, so just count
// the elements in "elems" instead, as that should be the visible ones
var evCount = elems.length;
});

ответил(а) 2021-01-25T17:25:10+03:00 4 месяца, 3 недели назад
44

Вместо подсчета видимых в данный момент элементов я использовал те же самые критерии, что и раньше, и подсчитал их, т.е.

$(cat).length;

Что было намного проще в этом отношении.

ответил(а) 2021-01-25T17:25:10+03:00 4 месяца, 3 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема