jQuery Find hidden jems

Question

How can I find number of none hidden rows, Here is the html

<div style="display:none;">
  <ul id="abc">
    <li>List Item</li>
    <li>List Item</li>
    <li style="display:none;">List Item</li>
    <li class="hidden">List Item Hidden</li>
  </ul>
</div>

CSS

ul { border: 1px solid blue; padding: 2px; margin: 2px;}
li { width: 100px; height:100px; background-color:blue;}
.hidden { display: none; }

jQuery

$(function () {
    alert($("#abc li:not(:hidden)").length);
});

http://jsfiddle.net/76NNp/27/

EDIT

The Code works as expected but what I want is

Finding Number of hidden List Items within a hidden Div...

Note: it's a pop-up list, I am using some code to .hide() and .show() li but while list has display:none; I still want to find out how many items are visible, as if it's zero, i would hide the button that opens this pop-up list

EDIT------------------------------------------2

FORGET EVERYTHING...

I want to find out number of not hidden list items that will become visible if Div they are in becomes visible.

Simple as milk now :-)

What's wrong with your current approach? Btw, you can shorten `:not(:hidden)` to `:visible`. — haim770, Feb 18 '14 at 11:38
@haim770 if you check the fiddle, it will show you that I am not getting right number of li that are not hidden.. — Mathematics, Feb 18 '14 at 11:40
@CustomizedName, do you need number of elements which doesn't have class hidden? — sinisake, Feb 18 '14 at 11:41
@RoryMcCrossan sorry, I added link to wrong fiddle, updated it now http://jsfiddle.net/76NNp/27/ — Mathematics, Feb 18 '14 at 11:41
My poor 2 eyes only seeing 2 visible `li`. which is what your `alert` is showing. — haim770, Feb 18 '14 at 11:41
I think OP wants to know how many list items are visible when the parent is hidden — billyonecan, Feb 18 '14 at 11:42
@CustomizedName your second fiddle is still correct as the parent element is hidden, therefore no child `li` elements are visible either. — Rory McCrossan, Feb 18 '14 at 11:42
@CustomizedName please, tell us what you are looking for (expecting) because all your jsfiddle work as expected — A. Wolff, Feb 18 '14 at 11:43
@billyonecan how on earth element will be visible if container is set to `display:none` — Deepak Ingole, Feb 18 '14 at 11:44
I know 0 are visible. I'm trying to explain that the OP would like to know how many list items are not explicitly hidden regardless of the state of the parent element — billyonecan, Feb 18 '14 at 11:46

score 2 · Accepted Answer · answered Feb 18 '14 at 11:48

You can filter the elements and check if their display style is set to none. Something like this:

$(function () {
    var items = $("li").filter(function(){
        return $(this).css("display") != "none";
    });
    alert(items.length);
});

Here is a working example

NOTE: This heavily depends on display:none; being the only factor that determines if an element is visible or not. If you use other methods such as visibility:hidden; then you will need to modify your filter to account for that.

Jain · Answer 2 · 2014-02-18T11:54:17.450

1

Try this my friend:

    $(function () {
    $i = 0;
    $("ul > li").each(function(){
        if(!$(this).hasClass('hidden') || $(this).css('display') != 'none')
            $i++;
    });
    alert($i);
});

edited Feb 18 '14 at 11:54

answered Feb 18 '14 at 11:39

Jain

1,209
10
16

3

Did you understand question? – Dhaval Marthak Feb 18 '14 at 11:41
1

I think you are on the wrong question... – musefan Feb 18 '14 at 11:42
sorry i can't see the parent display:none – Jain Feb 18 '14 at 11:48
And not getting exact question – Jain Feb 18 '14 at 11:48
@Jain: Please either edit you answer to provide a correct solution to match the question, or consider deleting the answer – musefan Feb 18 '14 at 11:53
yp i just edited it!! Now i think is correct – Jain Feb 18 '14 at 11:54
Please review my answer now thx 4 all – Jain Feb 18 '14 at 11:56

jQuery Find hidden jems

2 Answers2