БетаЛаборатория - внеочередной IT-блог

Записки обычного программиста

 

Записи с тэгом баги

jQuery, :hidden и тэг option

В jQuery имеет место одна проблема с псевдоцсс селектором :hidden - в браузерах отличных от FireFox конструкция вида
 
<script>
$(document).ready(function() {
	$("*:hidden").remove();
});
</script>
 
удалит не только действительно невидимые объекты, но и все options.
Проблема кроется в текущей реализации алгоритма определения видимости:
Sizzle.selectors.filters.hidden = function(elem){
	return elem.offsetWidth === 0 || elem.offsetHeight === 0;
};
 
Фаерфокс этот момент обрабатывает вполне корректно - в качестве габаритов option он всегда возвращает размеры отрисованного select. А вот остальные браузеры (возможно не все конечно, но основные) сплоховали - всегда возвращают 0, что и приводит jQuery в замешательство.
 
В принципе есть два варианта решения данной проблемы. Первый сгодится если проблемы возникают только с вашим кодом - тут можно просто изменить конструкцию селектора:
 
<script>
$(document).ready(function() {
	$("*:hidden:not(option)").remove();
});
</script>
 
Хуже если эта проблема мешает работе каких-либо плагинов. Решить ее можно "подменив" селектор ":hidden", что, между прочим, совсем не сложно.
 
<script>
// Удалять настоящий селектор не за чем.
// Просто переименуем его в :realhidden.
jQuery.expr[':'].realhidden = jQuery.expr[':'].hidden;
// А на его место поместим наш собственный, с дополнительной проверкой
jQuery.expr[':'].hidden = function(elem) {
	// Если обрабатываемый элемент это option возвращаем false
  	if (elem.nodeName == "OPTION") {
		return false;
  	} else { // Если нет - передаем управление оригинальному селектору :hidden 
 		return jQuery(elem).is(":realhidden");
	}
};
$(document).ready(function() {
	// Сработает функция jQuery.forceHidden и все опции останутся на месте
	$("#test :hidden").remove(); 	
});

</script>
 
Главное, чтобы замена селектора произошла до выполнения кода скрипта, который будет ее использовать. Скорее всего достаточно того, что он выполняется до события $(document).ready, но в некоторых случаях могут быть варианты - просто будте внимательный.

Авторизация

Логин:

Пароль:


Регистрация | Забыли пароль?


Последние записи


Promo

Follow pyhoster on Twitter Subscribe

Реклама

A Django project.