Необходимо применить какую-либо функцию к каждому элементу массива или объекта.

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

Решение

Для решения задачи воспользуемся вспомогательной функцией $.each(collection, callback(indexInArray, valueOfElement)). Не путайте ее с методом each(), который применяется для обхода набора элементов jQuery. Функция $.each(collection, callback(indexInArray, valueOfElement) позволяет совершать обход как массивов, так и объектов (листинг 10.1.1).

Листинг 1 0 .1 .1 . Использование вспомога те л ьной ф ун к ции $.each()

<!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-1-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 {
float:left;
width:100px; height:100px; padding:10px; margin:10px; border:1px solid #369;
}
p { color:#f00; }
</style>
<script type="text/javascript">
$(function () {
var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one:1, two:2, three:3, four:4, five:5 };
$.each(arr, function() {
$("#" + this).text("id='" + this + "'"); return (this != "four");
});
$.each(obj, function(n, val) {
$("#" + n).append("<p>" + val + "</p>");
});
});
</script>
</head>
<body>
</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-10-1-1</title>

float:left;

width:100px; height:100px; padding:10px; margin:10px; border:1px solid #369;

}

p { color:#f00; }

</style>

$(function () {

var arr = [ "one", "two", "three", "four", "five" ]; var obj = { one:1, two:2, three:3, four:4, five:5 };

$.each(arr, function() {

$("#" + this).text("id='" + this + "'"); return (this != "four");

});

$.each(obj, function(n, val) {

$("#" + n).append("<p>" + val + "</p>");

});

</script>

</head>

<body>

</body>

</html>

Обсуждение

Пять элементов div, каждый из которых имеет атрибут id, — вот вся HTMLразметка, показанная в листинге 10.1.1. Она послужит нам исключительно в демонстрационных целях.

Займемся рассмотрением JavaScript-кода. В самом начале объявляем массив arr и объект obj, обход которых попробуем совершить.

Вспомогательная функция $.each() принимает первым аргументом объект или массив, а вторым аргументом — функцию, которую необходимо выполнить для каждого элемента массива или объекта. В свою очередь эта функция тоже может принимать два аргумента. Первый — ключ (для объектов) или индекс (для массивов), второй — значение.

Попробуем совершить обход массива arr, передав его в качестве первого аргумента вспомогательной функции $.each(). Во втором аргументе передаем функцию, добавляющую в каждый элемент div текст со значением его идентификатора. Выражение, на основании которого выбирается нужный элемент div, состоит из знака # и указателя this, содержащего при каждой итерации значение очередного элемента массива.

Однако мы не будем совершать обход всего массива и прервемся сразу после того, как обнаружим в массиве значение ‘four’. Для того чтобы прервать итерации, функция, применяемая к каждому элементу массива, просто должна вернуть false.

Похожим образом обстоит дело и с обходом объекта obj. Передадим его в качестве первого аргумента вспомогательной функции $.each(), а во втором аргументе передаем функцию, которая добавит в каждый элемент div параграф, содержащий значение соответствующего свойства объекта obj.

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

Популярное

Категории

Необходимо применить какую-либо функцию к каждому элементу массива или объекта.

Решение

Обсуждение

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

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