jQuery .is(":visible") works in Firefox but not Chrome

Question

Possible Duplicate:
jquery .is(“:visible”) not working in Chrome

I am trying to get all of the visible items in an array. It's working fine in Firefox but not Chrome.

Here's my code:

$.each (t.config.promoInput, function (i, v) {
    var size = 0;

    $.each ($(v).find('option'), function (i, v) {
        $(v).show() // Show all options in <tt>$(v)</tt>.
            .not(':first-child') // Don't hide <tt>(All)</tt>.
            .not(':Contains("' + t.config.searchSpanInput.val() + '")') // Don't hide options that match the searchCriteria.
            .hide(); // Hide everthing that doesn't match or isn't (All).

        if ($(v).is(":visible")) {
            size++;
        }
    });
});

In Firefox size increments, whereas Chrome size stays equal to 0.

EDIT: :Contains is my own addition to the jQuery library. It is a case-insensitive version of :contains.

Also, I'm not sure but I think that referencing i and v in nested functions will access those in the parent scope, so no need to pass them? — Aram Kocharyan, Feb 02 '12 at 15:47
@AramKocharyan no what's there is fine (if a little confusing). The inner "v" will be the succession of ` — Pointy, Feb 02 '12 at 15:48
@Aram, they always refer to the closest defined variable with those names.. Since `i` and `v` are the parameters of the function those get used.. (*the innermost one*) — Gabriele Petrioli, Feb 02 '12 at 15:48
Also is the fact that you've got ":Contains" (instead of ":contains", lower-case) just a typo? — Pointy, Feb 02 '12 at 15:50
Using `v` both outside of the each and inside of it for two different elements can be very confusing. I can almost bet that Chrome is considering ` — Kevin B, Feb 02 '12 at 15:52
If that is the case, and chrome considers options as `:not(:visible)` regardless of display property, you may need to use another way of checking visibility. — Kevin B, Feb 02 '12 at 15:56

Nicola Peluchetti · Answer 1 · 2012-02-02T16:40:43.550

Why don't you simply check for the "display" property, if it's "none" than it's hidden, if it's "inline" than it is visible:

$.each (t.config.promoInput, function (i, v) {
    var size = 0;

    $.each ($(v).find('option'), function (i, va) {
        $(va).show() // Show all options in <tt>$(v)</tt>.
            .not(':first-child') // Don't hide <tt>(All)</tt>.
            .not(':Contains("' + t.config.searchSpanInput.val() + '")') // Don't hide options that match the searchCriteria.
            .hide(); // Hide everthing that doesn't match or isn't (All).

    });
    //add only visible options
   if ($(va).css("display") === "inline") {
        size++;
    }
});

Look here http://jsfiddle.net/gwbTm/2/ (i tested it with Chrome).
I think that setting the visibility of <option> is something that create problem with browsers (expecially wit IE)

This creates different results in Chrome and Firefox – Kloar Apr 26 '13 at 15:17 — Kloar, Apr 26 '13 at 15:17

score 0 · Accepted Answer · edited May 23 '17 at 12:20

0

Hiding and showing, (enable/disable) options is not well supported cross browser (disable/enable). See this question for one possible solution to your issue: jQuery disable SELECT options based on Radio selected (Need support for all browsers)

Once you get the options trimmed down, you can then use length to get the size.

edited May 23 '17 at 12:20

Community

1
1

answered Feb 02 '12 at 21:27

Mark Schultheiss

32,614
12
69
100

jQuery .is(":visible") works in Firefox but not Chrome

2 Answers2