Синтаксис для создания измененных переменных типа variable+i используя .each?

Question

[The Whiz]

Господа а подскажите пожалуйста синтаксис для прикрепления i к новым переменным внутри петли. Код выглядит так (по клику создается дополнительный ряд таблицы внутри которого производятся вычисления):

var i = 1;<br>
$("button").on('click', function() {<br>
  $("table tr:nth-child(2)").clone().find("input").each(function() {<br>
    $(this).attr({<br>
      'id': function(_, id) { return id + i },<br>
      'name': function(_, name) { return name + i },<br>
      'value': ''               <br>
    });<br>
  }).end().appendTo("table");<br>
  <br>
<br>
  var 	myTable = new calculationLine (($('input#one'+i).val()), ($('input#two'+i).val()));<br>
  		sumResult = myTable.sumMethod();<br>
	$( 'input#sum'+i ).val(sumResult);<br>
<br>
  i++;<br>
});<br>

Проблемное место там где создается новый конструктор — именно здесь я хочу присвоить myTable и sumResult порядковые числа i

работа

Answer 1

[Silver_Clash]

Кажется я понял что имеется ввиду :)

Вы хотите каждой вновь добавленной строке поставить в соответствие некие пронумерованные переменные. Вопрос только в том что вы с ними хотите делать? Ваши переменные объявленные внутри функции-обработчика события onClick все равно будут уничтожены после завершения работы функции. Вам нужно экспортировать их за пределы функции?

Comments

[Silver_Clash]

То есть иначе говоря, что вы хотите делать с переменными

var myTable, sumResult

???
Использовать внутри функции, или снаружи?
За пределами обработчика onClick их не существует.

[The Whiz]

я хочу чтобы создаваемая новая строка наследовала калькуляционные методы :) то есть если первая дефолтная строка с вычислениями использует myTable и sumResult, то после клонирования я хочу чтобы вторая использовала myTable1 и sumResult1. Интересует меня синтаксис оформления var myTable1 — то есть как прибавить i к этой переменной во время действия петли each. Вполне возможно что я делаю вообще все кардинально неправильно и есть способ лучше. :)

[Silver_Clash]

Поясните подробнее что значит наследовала калькуляционные методы? Давайте более глобально. Чего вы хотите добиться? Что бы при смене значения в ячейке менялась какая то локальная переменная и автоматически пересчитывались значения в третьей ячейке? Если на предыдущий вопрос ответ утвердительный, то вы все делаете кардинально неправильно.

[The Whiz]

Да, да, да. Просто я поставил перед собой задачу сделать это именно так. Выложил сюда.

[Silver_Clash]

Все ясно. Вам не нужно создавать вообще никаких локальных переменных. Вам не нужно вообще нумеровать ячейки. Вам вообще не нужен никакой each!

Просто промаркируйте ваши инпуты классами так:

<input class="one value">, <input class="two value">, <input class="result">

При нажатии на кнопку просто клонируйте строку и больше не делайте ничего. Создайте еще один обработчик события изменения (onChange, onBlur или что там вам больше подходит) любого инпута с классом .value, который будет определять в какой строке произошел клик (при помощи $(this).closest('tr')), затем будет выполнять поиск всех инпутов (.one, .two, .result) в строке, рассчитывать сумму (или что там у вас) и записывать результат в нужную ячейку. Все — profit.

[The Whiz]

А это было бы эффективно при скажем наличии тысяч строчек?

[Silver_Clash]

Могу вам написать полностью работающий код, но только чуток попозже, часиков после 22. Если у вас ничего не выйдет до того времени, стучитесь в скайп (совпадает с ником) :)

[Silver_Clash]

Думаю при наличии 1000 строчек предложенный мной вариант будет более предпочтителен.

[The Whiz]

Во всей этой истории я не очень понимаю как я могу использовать объект (я понимаю что можно тупо сложить через jQuery, но я учусь обращаться с объектами и поэтому этот момент критично важен). Вобщем пока что буду пилить дальше :)

[Silver_Clash]

Если я правильно понял постановку задачи, то вам нет никакого смысла использовать отдельный объект. Его конечно можно использовать, но в любом случае вам нужен отдельный обработчик событий изменения ячеек.

[The Whiz]

видимо я придумал не самую оптимальную задачу для тренировки на объектах. Я представлял каждую строку таблицы как отдельный объект но с одинаковыми прото-методами для совершения калькуляций.

[The Whiz]

Там же решил задачу предложенным способом, спасибо за идею :)

[Silver_Clash]

Если у вас этот вопрос возник чисто из спортивного интереса, то я бы посоветовал сначала изучить вопросы контекста исполнения, цепочки областей видимости и замыкания, а уж после этого пытаться применять ООП в JS. Если освоите замыкания, то возможно ваша точка зрения на многие вопросы изменится. В общем начните хотя бы с этого.

Answer 2

[ertaquo]

Во-первых, у вас нигде не изменяется значение переменной i. Во-вторых, в attr подстановка функции как значения атрибута используется только для массивов, см. доки.
Правильнее будет так:

$("table tr:nth-child(2)").clone().find("input").attr({
  'id': function(index, val) { return val + index },
  'name: function(index, val) { return val + index },
  'value' : ''
}).end().appendTo("table");

Comments

[ertaquo]

А в-третьих, у кэллбеку функции each первым параметром передается индекс элемента, вторым — сам элемент. Т. е. можно использовать конструкцию типа $('input').each(function(index, elem) { elem.name = 'input' + index; }); См. доки.

[The Whiz]

Как не изменяется, делается i++ по завершении. Первая часть кода меня как раз всем устраивает, а вот там где нужно создать новый объект я как раз застрял

[ertaquo]

Извиняюсь, просто непонятно, в чем проблема. Нужно нечто наподобие такого что ли?

var i = 1;
var myTable = [], sumResult = [];
$("button").on('click', function() {
 ... 

  myTable[i] = new calculationLine (($('input#one'+i).val()), ($('input#two'+i).val()));
  sumResult[i] = myTable.sumMethod();
    $( 'input#sum'+i ).val(sumResult);

  i++;
});

[The Whiz]

Вы примерно поняли! Но такой вариант не работает.

[ertaquo]

А что не так? Навскидку, тут проблема может быть только в отсутствии элементов 'input#one'+i и 'input#two'+i. В чем выражается ошибка? Можете привести логи консоли или саму страницу целиком?

Answer 3

[Silver_Clash]

А нельзя ли нумеровать строки таблицы? можно же сделать что то типа:

var tr = $("table tr:last");
var v1 = tr.find('input.one');
var v2 = tr.find('input.two');

myTable = new calculationLine (v1, v2);

только тогда нужно отказаться от id элементов и использовать классы. И ради бога, переименуйте функцию конструктор calculationLine в CalculationLine

Comments

[Silver_Clash]

Можно так же номера строк вынести в отдельный атрибут и выбирать их как то так:

var tr = $('table tr[data-number="' + i + '"]');

[The Whiz]

Объясните пожалуйста про переименование — я пока в уроках нигде не встречал имена с большой буквы.

[Silver_Clash]

Хорошим тоном считается начинать имена конструкторов с заглавной буквы, а имена простых функций с прописной, что бы их можно было легко отличить.

Answer 4

[The Whiz]

Спасибо, учту. По поводу решения — видимо не то, что я ищу.

Comments

[Silver_Clash]

Я правильно понял, что необходимо: Добавить новую строку, просуммировать две ячейки из нее и вывести результат в третьей ячейки той же строки?

[The Whiz]

Да, за действия с числами отвечает отдельный метод:

function calculationLine(num1, num2) {
this.num1 = parseInt(num1);
this.num2 = parseInt(num2);

};

CalculationLine.prototype.sumMethod = function() {
return (this.num1 + this.num2);
};

[The Whiz]

Забыл озаглавить букву :)

[Silver_Clash]

Тогда вариант предложенный мной выше был бы проще нумерации отдельных инпутов. Ну если уж очень хочется нумеровать их то проще было бы сделать так:
1. Инпуты обозначить при помощи классов .one и .two.
2. Добавить к ни атрибут типа data-id
3. Обращаться к инпутам так:

$('input.one[data-id="' + i + '"]')

[The Whiz]

Все так. НО! У меня проблема с созданием нового объекта.