在jQuery中按类名获取可见元素的动态计数
Get dynamic count of visible elements by class name in jQuery
在链接的fiddle中,我在jQuery中设置了一个复选框过滤器,用于根据公司名称和职位筛选人员。我想要一个可见元素的总数,当元素显示/隐藏时,这些元素会动态变化。在fiddle中,我高亮显示了总元素计数,但当复选框被选中/取消选中时,它目前不会改变。我发现了几个类似的问题,但我还没能找到一种方法将这些建议实现到我的代码中,使计数动态化。如有任何帮助,我们将不胜感激。
http://jsfiddle.net/point71echo/fnzag0pp/6/
这是我正在使用的jQuery代码:
$(function() {
$('.peoples, .companies').on('click', function() {
var checkedPeoples = $('.peoples:checked');
var checkedCompanies = $('.companies:checked');
if (checkedPeoples.length || checkedCompanies.length) {
if (checkedCompanies.length === 0) {
$('.row > div').hide();
$.each(checkedPeoples, function() {
var prdId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"]').show();
});
} else if (checkedPeoples.length === 0) {
$('.row > div').hide();
$.each(checkedCompanies, function() {
var brandId = $(this).attr('data-id');
$('.row > div[company="' + brandId + '"]').show();
});
} else {
$('.row > div').hide();
$.each(checkedPeoples, function() {
var prdId = $(this).attr('data-id');
$.each(checkedCompanies, function() {
var brandId = $(this).attr('data-id');
$('.row > div[data-category="' + prdId + '"][company="' + brandId + '"]').show();
});
});
}
} else {
$('.row > div').show();
}
});
});
// Total count of elements (visible and invisible)...
var x = $('.people:visible').length;
$('#count').append( x );
这就像计算可见元素和更改事件处理程序底部的HTML一样简单
$('#count').html( $('.people:visible').length );
FIDDLE
相关文章:
- 将列表元素动态添加到ul元素中
- 将输入 html 元素动态关联到颜色选取器
- 媒体元素 - 动态加载音频
- 根据其内部元素动态更改 CSS
- 编写脚本以向元素动态添加.current(类似活动类)的场景
- 使用knockoutjs虚拟元素动态创建html部分
- 将JS中的元素动态添加到XUL中
- 如何从jquery中获得元素动态附加的完整表
- 使用jquery向li元素动态添加类
- 点击事件不't在尝试将元素动态添加到<ul>标签
- 使用Knockout.js Issue将元素动态添加到嵌套列表中
- 如何从DOM元素动态禁用popover
- 将样式元素动态插入DOM的最后一种跨浏览器方式
- 无法将元素动态添加到数组中
- 指令如何等待元素'动态插值属性被处理?
- 设置活动元素和非活动元素(动态)
- 是否可以使用JS/PHP为网页中的元素动态分配ID
- 如何制造<光>元素动态调整以填充浏览器窗口的整个宽度
- 基于页面元素动态构建菜单结构
- 向现有元素动态添加删除绑定