передача значения из input "value" в div "id"

[mi.rafaylik]

Схема такая:
Есть ссылка <a> которая по клику записывает значения своего id в куки с разделителем "-" а именно название, цену и количество. Нужно сделать так, чтоб количество определял пользователь с помощью <input> значения value. То есть цифра из <input value> должна попасть в конец <a id> вместо еденицы (1 штука по умолчанию).
было: product1-price100-1
должно быть: product1-price100-2
Логически получился следующий код, который так и не заработал
Что нужно изменить для успешного выполнения?

HTML:

<div class='add'><a id='product1-price100-1' class='addCart'></a> <input class='addCopies' value='2'></div>
<div class='add'><a id='product2-price100-1' class='addCart'></a> <input class='addCopies' value='2'></div>

jQuery:

$(document).ready(function(){

$('div.add').each( //для каждого блока со стилем .add
var div = $(this);
var a = $(div).('a');
var i = $(div).('input');
var value = $(i).val(); //берём значение input value
var a_id = $(a).attr('id'); //смотрим значение a id
var arr = a_id.split('-'); //парсим a id по дефису
var new_id = arr[0] + arr[1] + "-" + value; //добавляем новое значение
$(a).attr('id',new_id);//заменяем id на новое
);

});

[Serg_pnz]

Поправил ошибки

$(document).ready(function(){

  $('div.add').each(function(){ //для каждого блока со стилем .add
var div = $(this);
var a = $(div).children('a');
var i = $(div).children('input');
var value = $(i).val(); //берём значение input value
var a_id = $(a).attr('id'); //смотрим значение a id
var arr = a_id.split('-'); //парсим a id по дефису
var new_id = arr[0] + arr[1] + "-" + value; //добавляем новое значение
$(a).attr('id',new_id);//заменяем id на новое
});
  
});

[mi.rafaylik]

спасибо, действительно ночная оплошность ))
теоритически всё логично, но на практике пример всё равно не заработал..

[Sanda]

А где, собственно, указание на то, что действие должно выполняться по клику? Может, $('div.add').click?

Много лишних долларов в коде. jQuery-селектор возвращает jQuery-массив, его нет смысла потом оборачивать в лишний $ - мы ведь нигде не обращаемся к отдельному элементу этого массива.

var div = $(this);
var a = div.children('a');
var i = div.children('input');
var value = i.val(); //берём значение input value
var a_id = a.attr('id'); //смотрим значение a id

Доллары имеют смысл, только если делать вот так:

var div = $(this);
var i = div.children('input')*!*[0]*/!*;
var value = *!*$(i)*/!*.val(); //i - не jQuery, a HTMLElement

Но ещё правильнее в этом случае переписать по-другому:

var div = $(this);
var i = div.children('input')*!*.eq(0)*/!*;
var value = *!*i*/!*.val(); //i - jQuery

[mi.rafaylik]

Sanda
действие происходит по клику на <a class='addCart'> - я хотел чтоб значение передавалось сразу после ввода в <input>, но Вы вероятно правы, нужно по клику.

[Sanda]

Не важно, как именно передавать - по клику, по вводу. Важно указать в коде метод передачи (: В представленном куске его просто нет. На document.ready однократно выполняется некое действие, но никаких указаний на то, что это же действие нужно выполнять ещё раз, нет.

[mi.rafaylik]

о, в какую сторону двигаться понял, спасибо )

[Sanda]

Повторюсь - вместо $('div.add').each поставь $('div.add').click. Ну и исправления Serg_pnz не забудь добавить. Не самый правильный вариант реализации, конечно, но работать должен.

[mi.rafaylik]

Попутно input заменил на select, а родительский div на p.

Решение проблемы 1:
В строке 8 нужно было не просто указать значение value, а указать, что оно добавляется к уже имеющемуся id!
было: '-' + 'value'
стало: 'id' + '-' + 'value'

Решение проблемы 2:
Для элемента <select> нужен не .click() а .change() !
С этим кодом заработало:

$(document).ready(function(){
	$('#products p').change(function(){
	var p = $(this);
	var a = p.children('a');
	var s = p.children('select').eq(0);
	var value = s.val();
	var a_id = a.attr('id');
	var arr = a_id.split('id' + '-');
	var new_id = arr[0] + arr[1] + '-' + value;
	$(a).attr('id', new_id);
	});
});