jQuery: How to count the number of elements which "display" isn't "none"?

Question

I use show() and hide() to show and hide rows in a table.

How could I count the number of non-hidden rows (more accurately, rows with display != none) ?

Note that:

$('tr:visible').length

won't work because if the table itself has display=none, the result will always be 0.

score 22 · Answer 1 · answered Mar 16 '11 at 12:15

22

Try this:

$('tr:not([style*="display: none"])').length

Example http://jsfiddle.net/infernalbadger/7LvD5/

answered Mar 16 '11 at 12:15

Richard Dalton

35,513
6
73
91

should work in most cases, but could break because it is just a substring match, and not an exact equality test. – Alnitak Mar 16 '11 at 12:21
True, but he said he was using hide() and it works with that. – Richard Dalton Mar 16 '11 at 13:28
Yes, but what happens if some other property 'foo-display: none' is set? Your substring match would (incorrectly) detect that. – Alnitak Mar 16 '11 at 13:36
Good point. Your way definitely seems like the better way to do it. – Richard Dalton Mar 16 '11 at 13:39
I found this the better solution for matching against class and feel it unlikely the foo-display point would surface in many scenarios... none really come to mind. – Pete - iCalculator Jun 27 '18 at 09:02

score 19 · Accepted Answer · answered Mar 16 '11 at 12:16

19

Filter your rows based on their actual CSS property:

$('tr').filter(function() {
    return $(this).css('display') !== 'none';
}).length;

answered Mar 16 '11 at 12:16

Alnitak

334,560
70
407
495

score 2 · Answer 3 · edited May 23 '17 at 12:34

2

jquery selector to count the number of visible table rows?

Change !== to ===

edited May 23 '17 at 12:34

Community

1
1

answered Mar 16 '11 at 12:16

miqbal

2,213
3
27
35

score 1 · Answer 4 · answered Jan 06 '21 at 13:54

Adding this to the mix. I found this to be a more reliable option.

function recount () {
    var numOfVisibleRows = jQuery('tr.itemtext:visible').length;
    document.getElementById("item_table_count").innerHTML = numOfVisibleRows;
}

I like this because my table itemtext is hiding rows in different ways. I hope it's useful.

See this question for more information: jquery selector to count the number of visible table rows?

jQuery: How to count the number of elements which "display" isn't "none"?

4 Answers4

Linked

Related