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

ProgramBox

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

Post author:admin
Запись опубликована:7 мая, 2023
Post category:Вопросы по программированию

#jquery #jquery-selectors #webkit

#jquery #jquery-селекторы #webkit

Вопрос:

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

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

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

Если я вызываю $('#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

Ответ №1:

У меня точно такая же проблема с созданием разбиения на страницы с использованием jQuery .show() и .hide() для скрытия или отображения моих элементов. Это действительно проблема, которую chrome рассматривает 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 нормально… Я надеюсь, что это может помочь другим людям, имеющим ту же проблему!

1. Блестяще, спасибо. Я обнаружил, что мог бы использовать, filter(":visible") если бы я выбирал div s, но фильтр сломался при выборе span s. Ваше решение отлично подходит для обоих.

Ответ №2:

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

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

1. Я думаю, что мне удалось его сломать jsfiddle.net/FRFpH/7 это намного ближе к реальному коду, он находится внутри таблицы. Все еще работает в FF

2. Я считаю, что если первоначально отображаемый элемент имеет тег блока (такой как <h1> или <p> ), то webkit ведет себя немного странно… jsfiddle.net/FRFpH/8 в этом примере попробуйте удалить <p> тег из 3-го элемента, и это сработает

3. Ваше право, так странно. Похоже, что display: inline — единственная опция, которая не дает Chrome работать. Играем с ним: P

Ответ №3:

:hidden Селектор предназначен не только для простого 'display' != 'hidden' сравнения.

Согласно документам jQuery, элементом является :hidden , если:

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

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

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