Как обращаться к динамически создаваемым элементам?

Question

[Павел]

Есть список который генерируется динамически, ему можно задать id , внутри li > label+input+span
и есть другой список я его могу оформить как угодно , надо из моего списка переносить в автогенерируемый текст в label и input.
Не догоняю как сделать
если этот сгенерирован

<ul id="ulGen">
<li>
      <input type="checkbox" value="значение" id="choice_1_11_1" tabindex="1">
      <label for="choice_1_11_1">описание</label>
      <span class="price">100500 P</span>
</li>
<li>
      <input type="checkbox" value="значение" id="choice_1_11_2" tabindex="1">
      <label for="choice_1_11_2">описание</label>
      <span class="price">100500 P</span>
</li>
<li>... 10 шт.
</ul>

то как с аналогичного все поля передать сюда?

Comments

[MrTimon]

Что то не пойму в чом проблема того что первый список згенерирован динамически. После того как елемент додан в DOM к нему можно обратиться так как и ко всем остальным по селектору (айди, классы, ... много способов). Не ясна ситуация.

[Павел]

MrTimon, я могу обратится только к id="ulGen" , все остальное генерируется автоматически каждый раз разное, только структура сохраняется , как мне из одной формы с такой же структурой перенести все в такую же форму?

[MrTimon]

mrusklon, Ну поидее как то так

var myUlList = $('ul#mylist'); // Ваш список
//перебираем все елементы генерированого списка
$('ul#ulGen').find('li').each(function(index,el) { 
    $(el).find('input').val(myUlList.find('li').get(index).find('input').val() );
    $(el).find('label').html(myUlList.find('li').get(index).find('label').html() );
    $(el).find('span').html(myUlList.find('li').get(index).find('span').html() );
})

но этот скрипт нужно запускать уже после того как списос будет сгенерирован ну и если у вас список состоит с такого же количества елементов как и сгенерированый

[Павел]

MrTimon, да с герерацией все норм , так как генерирует php и DOM мы получаем уже в нужной кондиции :) , ок мы звли все li , а как с ними оперировать? Как перебросить значения в другой аналогичный список?

[MrTimon]

mrusklon, ну так выше я же написал, или это не то, что вам нужно?

$('ul#ulGen').find('li').each(function(index,el) { - здесь перебор генерированого списка в ulGen мы ищем все li-ки и перебираем их в цикле.

Потом myUlList.find('li').get(index) - это мы выбираем соответствующий елемент с Вашего списка для каждого елемента в цикле

тоисть опять

//Задаем переменную с вашим списком 
var myUlList = $('ul#mylist');

//Потом перебираем все елементы генерированого списка
$('ul#ulGen').find('li').each(function(index,el) { 
    //Ищем елемент в вашем списке, который соответствует елементу с цикла
    var myEl = myUlList.find('li').get(index);
     
    // Ищем в елементе з списка инпут и выставляем ему значение с такого же инпута в вашем списке
    $(el).find('input').val(myEl.find('input').val() );

    // Проделываем теже операции с label и span
    $(el).find('label').html(myEl.find('label').html() );
    $(el).find('span').html(myEl.find('span').html() );
})

[Павел]

MrTimon, что то не хочет работать

Uncaught TypeError: myUlList.find(...).get(...).find is not a function

[Павел]

вот в песочнице развернул , та же ошибка https://codepen.io/mrusklon/pen/OxEjoa?editors=1010

[MrTimon]

mrusklon, Ошибка в том что myUlList.find('li').get(index) возвращает не jQuery колекцию, потому его нужно брать через jQuery чтобы задейсвовать find. тоисть эту строку var myEl = myUlList.find('li').get(index); нужно изменить на такую var myEl = $(myUlList.find('li').get(index)); и тогда все заработает https://codepen.io/anon/pen/dVKVga?editors=1010

[Павел]

MrTimon, идеально , закиньте свой ответ "в ответ" :) выберу решением

[MrTimon]

mrusklon, Закинул, можете закрыть вопрос.

Answer 1

[MrTimon]

//Задаем переменную с вашим списком 
var myUlList = $('ul#mylist');

//Потом перебираем все елементы генерированого списка
$('ul#ulGen').find('li').each(function(index,el) { 
    //Ищем елемент в вашем списке, который соответствует елементу с цикла
    var myEl = $(myUlList.find('li').get(index));
     
    // Ищем в елементе з списка инпут и выставляем ему значение с такого же инпута в вашем списке
    $(el).find('input').val(myEl.find('input').val() );

    // Проделываем теже операции с label и span
    $(el).find('label').html(myEl.find('label').html() );
    $(el).find('span').html(myEl.find('span').html() );
})