Изменение имени входа с помощью JQUERY

Question

Я пытаюсь изменить все входные имена на основе индекса списка <li>, но похоже, что он вообще не меняется.

$('.test').click(function() {
for(var i=0;i<$("li.songs").length;i++)
{
  var ob = $("li.songs").eq(i).clone();
  ob.find('input').each(function()
  {
    this.name = this.name+i;
    alert(this.name); //just checking if does it change
  });      
}
});

Теперь в предупреждении отображается правильное имя Iхочу, НО без изменений в имени, когда я проверяю элемент И пытаюсь отправить форму и отобразить все значения POST.

Пример ожидаемого вывода перед изменением:

<li class="songs"><input type="text" name="song" /></li>
<li class="songs"><input type="text" name="song" /></li>
<li class="songs"><input type="text" name="song" /></li>

После изменения:

<li class="songs"><input type="text" name="song1" /></li>
<li class="songs"><input type="text" name="song2" /></li>
<li class="songs"><input type="text" name="song3" /></li>

ПРИМЕЧАНИЕ. Я НЕ ХОЧУ, чтобы входная названная песня была Массивом.

Answer 1

Вы клонируете объект, поэтому изменение выполняется для копии, а не для исходного узла DOM.

Не используйте clone(), и все будет в порядке. Или сделать это:

$("li.songs input").each(function(i) {
  $(this).attr('name', $(this).attr('name') + i);
});

Answer 2

$("li.songs").each(function(i) {
  $(this).find('input').attr('name', 'song' + i);
});