Alexanevsky
@Alexanevsky
Любительская web-разработка

Что значит этот код?

Здравствуйте!

Можете, пожалуйста, пояснить, что значат некоторые строчки этого кода? Суть его в следующем: сделать группировку по ID, затем, в рамках каждого ID, по дате, затем - посчитать значения value в рамках каждой даты. Код:
// 1 часть
var $container = $('.container'),
    $blocks = $container.find('.block'),
    results = {},
    output = '';

$blocks.each(function () {
    // 2 часть
    var $this = $(this),
        id = $this.find('.id').html(),
        date = $this.find('.date').html(),
        value = $this.find('.value').html();
    
    // 3 часть
    results[id] = results[id] || {};
    results[id][date] = results[id][date] || 0;
    results[id][date] += parseInt(value);
});

//4 часть
$.each(results, function (id, dates) {
    $.each(dates, function (date, value) {
        
    //5 часть
    output += '<div class="block">' +
      '<div class="id">' + id + '</div>' +
      '<div class="date">' + date + '</div>' +
      '<div class="value">' + value + '</div>' +
   '</div>';
        
    });
});

//6 часть
$container.html(output);

JS идёт вместе c HTML:
<div class="container">
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/21/2015</div>
      <div class="value">111</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/21/2015</div>
      <div class="value">222</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/30/2015</div>
      <div class="value">333</div>
   </div>
   <div class="block">
      <div class="id">1</div>
      <div class="date">02/30/2015</div>
      <div class="value">444</div>
   </div>
   <div class="block">
      <div class="id">2</div>
      <div class="date">05/17/2015</div>
      <div class="value">555</div>
   </div>
</div>


Результат, который выдаёт код, понятен (работа кода на JSFiddle). Понятны и некоторые его части, но есть пара вопросов.
  • 1 часть. Тут всё понятно - вводим переменные.
  • 2 часть. Здесь тоже ясно: тоже вводим переменные и даём им значения из HTML.
  • 3 часть. Здесь я перестал понимать, что происходит.
  • 4 часть. Также неведомо мне, что это такое.
  • 5 часть. Здесь понятно, подготавливаем вывод.
  • 6 часть. Выводим, вопросов нет.

Собственно, вопросы только по 3 и 4 части. Что же там происходит?

И ещё один дополнительный вопрос. Так как я не очень знаю jQuery, из кода до меня не дошло, как же осуществляется складывание значений value. Что мне следует изменить, если я захочу добавить, например, divы .value2 и в них не суммировать значения value, а найти среднее? Т.е. мне понадобиться их посчитать, затем сосчитать количество, а потом и разделить одно на другое, как же мне это сделать?

Благодарен за подсказки.

С уважением,
Александр.
  • Вопрос задан
  • 417 просмотров
Пригласить эксперта
Ответы на вопрос 1
Petroveg
@Petroveg
Миром правят маленькие с#@&ки
3 часть балета
$blocks.each(function () {
	//Проходим по всем элементам с классом .block
	var $this = $(this),
		//Понятно, создали JQ-объект и сохранили ссылку
		id = $this.find('.id').html(),
		// Получили содержание элемента с классом .id в этом контексте
		date = $this.find('.date').html(),
		// То же самое для класса .date
		value = $this.find('.value').html();
		// И для класса .value

	// Задача — для всех одинаковых значений id объединить поля с датой
	results[id] = results[id] || {};
	// В свойстве с именем по значению id уже есть объект, или мы его только что создали
	// Задача — для всех одинаковых дат в объекте с одинаковым id получить сумму
	results[id][date] = results[id][date] || 0;
	// В свойстве с именем по значению date уже есть число, или пишем в него 0
	results[id][date] += parseInt(value);
	// И добавили целое, полученное из value
});
// Обход элементов завершён

Тот же балет, часть 4
$.each(results, function (id, dates) {
	// Обходим объект results, в каждой итерации получаем название свойства и его значение
	$.each(dates, function (date, value) {
		// А тут получаем название свойства, сформированное из даты, и его значение
		// В замыкании есть всё, что нужно — id, date, value
	});
});

Для обработки нового поля нужно слегка видоизменить структуру объекта и его обработку.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы