На веб-странице необходимо подсчитать число видимых и невидимых элементов и вывести эти значения в окне предупреждения.

Опубликовал: admin Monday, July 8, 2024 в категории jQuery, Подборка рецептов | Пока нет комментариев

Решение

Решим задачу с помощью двух фильтров — :visible и :hidden (листинг 1.5.1).

Листинг 1 .5 .1 . Использование фильтров :visible и :hidden

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" xml:lang="ru">
<head>
<title>example-1-5-1</title>
<content>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.5.2.min.js" type="text/javascript"></script>
<style type="text/css">
div { width:50px; height:50px; margin:5px; border:4px outset #00f; float:left; }
.s           
tarthidden { display:none; }
</style>
<script type="text/javascript">
$(function(){
alert("Видимых элементов найдено ... " +
$(":visible", document.body).length + "\nНевидимых элементов найдено ... "
+
$(":hidden", document.body).length);
});
</script>
</head>
<body>
<form>
<input type="hidden" />
<input type="text" />
<input type="hidden" />
</form>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<head>

<title>example-1-5-1</title>

div { width:50px; height:50px; margin:5px; border:4px outset #00f; float:left; }

tarthidden { display:none; }

</style>

$(function(){

alert("Видимых элементов найдено ... " +

$(":visible", document.body).length + "\nНевидимых элементов найдено ... "

$(":hidden", document.body).length);

});

</script>

</head>

<body>

<form>

</form>

</body>

</html>

Обсуждение

Код листинга 1.5.1 очень прост. Имеются пять элементов div, два из которых скрыты с помощью CSS-свойства display, и элемент form с тремя элементами input, два из которых имеют значение hidden в атрибуте type, т. е. являются скрытыми полями формы.

В JavaScript-коде мы выводим в окне предупреждения число найденных видимых и невидимых элементов, сопровождая это поясняющим текстом. Интересующие элементы мы ищем в контексте document.body из-за того, что фильтр :hidden в некоторых браузерах подсчитывает элементы head, title, script и т. д.

В ряде случаев следует учитывать и другие особенности подсчета элементов фильтром :hidden — для него считаются невидимыми те элементы (или их родители), которые не имеют размеров в документе. И конечно учитываются элементы, скрытые с помощью CSS.

Итак, в результате выполнения кода из листинга 1.5.1 мы получим сообщение о том, что в теле документа удалось обнаружить пять видимых элементов и четыре невидимых.

Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)

Популярное

Категории

На веб-странице необходимо подсчитать число видимых и невидимых элементов и вывести эти значения в окне предупреждения.

Решение

Обсуждение

Похожие посты:

Комментировать Cancel reply