Javascript-форум - Обработка нескольких элементов

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Обработка нескольких элементов (https://javascript.ru/forum/misc/55206-obrabotka-neskolkikh-ehlementov.html)

Обработка нескольких элементов

Добрый вечер! Есть на странице один или несколько блоков с инпутами, куда вводятся данные для не сложного расчета.
Нюанс в том, что блок может быть один, а может быть два-три-десять.
Ниже-указанный скрипт приведен для варианта один блок или 2 блока.
Вопрос: Как бы оптимизировать этот банальный код после "} else {" для случая, если блоков больше одного? Ну чтобы не писать эти бесконечные room_shirina0, room_shirina1 и так далее?

Код:

<div class="room-block" id="room0">
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>

<div class="room-block" id="room1">
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>




var blockcount = $('.room-block').length;

if (blockcount==1) {
       var room_shirina = $('#room0 INPUT[name=roomw]').val();
	   var room_visota = $('#room0 INPUT[name=roomh]').val();
	   var room_area = (room_shirina*room_visota);
} else {
       var room_shirina0 = $('#room0 INPUT[name=roomw]').val();
	   var room_visota0 = $('#room0 INPUT[name=roomh]').val();
	   var room_shirina1 = $('#room1 INPUT[name=roomw]').val();
	   var room_visota1 = $('#room1 INPUT[name=roomh]').val();
	   
	   var room_area0 = (room_shirina0*room_visota0);
	   var room_area1 = (room_shirina1*room_visota1);
	   
	   var room_area = (room_area0 + room_area1);
	   
}

deltaman,
напишите цикл для блоков $('.room-block') тогда никаких id не понадобится

Общая сумма блоков

deltaman,

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function() {
         var room = $(".room-block"),
             info = $(".block_info");
         room.on('input', 'input', function() {
             var room_area = 0;
             room.each(function() {
                 var inp = $('input', this);
                 var area = (+inp[0].value || 0) * (+inp[1].value || 0);
                 room_area += area;
             });
             info.html(room_area)
         })
     });
  </script>
</head>

<body>
<div class="room-block" >
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>
<div class="room-block" >
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>
<div class="room-block" >
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>
<div class="room-block" >
    <span class="dattext">Высота, м </span>
    <input type="text" name="roomh" class="dat" value=""> <br>
    <span class="dattext">Ширина, м </span>
    <input type="text" name="roomw" class="dat" value=""> <br>
</div>
<div class='block_info'></div>
</body>
</html>

Спасибо, Щас попробую это прикрутить.

Не получается приладить, все равно в итоге мне нужен:

var room_area = 'сумме площадей по блокам';

для дальнейшей обработки в текущей функции (я просто привел только её часть отвечающую за определение площади по блокам) и вставка после "} else {" какой-либо функции или её содержимого приводит либо к NaN в итоге, либо к тому, что считает только первый блок.
Нужно что-то в этом духе: (пишу полную ерунду, просто пытаюсь объяснить логику):

} else {

       var room_shirina+n = $('#room+n INPUT[name=roomw]').val();
       var room_visota+n  = $('#room+n INPUT[name=roomh]').val();
	   
	var room_area = (var room_shirina+n  +  var room_visota+n);
	   
}

Цитата:

Сообщение от deltaman

var room_area = 'сумме площадей по блокам';

а в коде выше разве это не так?

у вас всё верно, просто приладить к себе в функцию не могу, мне нужно то, что я смогу вставить между своими:

} else {
..........
}

иначе не получается обработка у меня дальше.

deltaman,
уберите ваши if ... else

и замените на

var room = $(".room-block");
 var room_area = 0;
             room.each(function() {
                 var inp = $('input', this);
                 var area = (+inp[0].value || 0) * (+inp[1].value || 0);
                 room_area += area;
             });

Работает!!! Спасибо огромное!!!