JQuery: видимый селектор не работает на WebKit

Question

Мне нужно выбрать один видимый элемент span в списке внутри div, например: $('#videoDesc > span:visible') или $('#videoDesc > span').filter(':visible'), и он не работает в webkit

Для этих элементов span установлено display: none; в таблице стилей (я проверял удаление этого и ничего не изменилось). На теге style одного из них я установил его отображение на inline .

Отображение элементов span изменяется с помощью функций jQuery show () и hide ().

Если я вызываю $('#videoDesc > span:hidden'); с консоли Chrome, я получаю все элементы каждый раз, неважно, на каком из них я звонил show(). Точно так же $('#videoDesc > span:visible'); возвращает мне пустой список: [] каждый раз.

В Firefox и IE у меня нет этой проблемы.

Я скопировал это с консоли Chrome. Как вы можете видеть, элемент span videoDesc-1 имеет style="display: inline;", и он все еще появляется при использовании :hidden

$('#videoDesc > span').filter(':hidden');
[<span id="videoDesc-1" style="display: inline;">…</span> ,
<span id="videoDesc-2">…</span> , <span id="videoDesc-3">…</span> , 
<span id="videoDesc-4">…</span>]

Это какая-то ошибка webkit?

Я смог обойти это, выполнив следующее:

$('#videoDesc > span').each(function(i, e) {
    if (this.style.display != 'none') {
        ...
    }
});

Но меня это беспокоит, так как кажется, что неправильное решение, правильное использование :visible, но оно просто не работает с webkit

jQuery 1.6.4

Answer 1

У меня есть точная проблема, когда я делаю paginator, используя jQuery .show() и .hide(), чтобы скрыть или показать мои элементы. Это действительно проблема с хромом, считая display:inline скрытым.

Я решил это, заменив это:

$(whatever).filter(':visible');

этим:

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

---

или в функции для повторного использования:

$(whatever).filter(visibleFilter);

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

Это действительно исправление для Chrome и IE, так как он нормально работает в Firefox ... Надеюсь, это поможет другим людям, у которых возникла такая же проблема!

Answer 2

Селектор :hidden имеет больше, чем простое сравнение 'display' != 'hidden'.

Согласно jQuery Документы элемент равен :hidden, если:

• У них для CSS нет отображаемого значения.
• Это элементы формы с type = "hidden".
• Их ширина и высота явно установлены на 0.
• Элемент-предок скрыт, поэтому элемент не отображается на странице.

Особенно последний пул, в котором упоминается область видимости предка, кажется важной вещью, чтобы проверить, есть ли у вас проблемы с фильтром :hidden.

Отказ от ответственности: в документах также сообщается о многочисленных изменениях в разных версиях jQuery в отношении поведения селектора.

Answer 3

Не могли бы вы проверить это: http://jsfiddle.net/FRFpH/

Невозможно воспроизвести вашу проблему (пробовал в IE, Chrome и FF): /