Необходимо узнать число элементов, выбранных в набор jQuery с помощью какоголибо селектора.
Решение
Для решения такой задачи можно использовать метод size() или просто обратиться к свойству length (листинг 10.2.1).
Листинг 1 0 .2 .1 . Использование метода size() и с войств а length
<!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-10-2-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:60px; height:60px;
margin:5px; float:left; border:1px solid #369;
}
.test {
background-color:#369;
}
br { clear:left; }
</style>
<script type="text/javascript">
$(function(){
$("button").click(function(){
var size = $("div.test").size(); var length = $("div.test").length;
alert("size = "
+ size + "
& length = "
+ length);
});
});
</script>
</head>
<body>
<br />
<button>Получить</button>
</body>
</html>
Обсуждение
HTML-разметка, показанная в листинге 10.2.1, описывает семь элементов div, четыре из которых имеют класс с именем test. С помощью кнопки Получить будем выводить в окне предупреждения число элементов, выбранных в набор jQuery.
Код JavaScript начинается с того, что с элементом button связывается обработчик события click. Внутри функции-обработчика мы выбираем элементы div с классом test, получаем их число с помощью метода size() и сохраняем в переменной size. Затем проделываем то же самое, только обращаясь к свойству length, а результат сохраняем в переменной length. После этого выводим значения этих переменных в окне предупреждения вместе с поясняющей надписью.
Ничего удивительного, что результаты совпали: в обеих переменных оказалось число 4, именно столько элементов div.test попали в набор jQuery.
ПРИМЕЧАНИЕ
Следует отметить, что вариант с обращением к свойству length работает несколько быстрее.
Источник: Самков Г. А. jQuery. Сборник рецептов. — 2-е изд., перераб. и доп. — СПб.: БХВ-Петербург, 2011. — 416 с.: ил. + CD-ROM — (Профессиональное программирование)
Похожие посты:
- Оценка «любви» поисковой системы Google с помощью сервиса Google Analytics (0)
- CSS: основы основ (0)
- Создание блока с закругленными краями (0)
- Изменение расположения элементов макета на противоположное, чтобы меню было справа (0)
- Создание макета с тремя колонками средствами CSS (0)
- Выделение текста на странице (0)
- Создание галереи миниатюр (0)