Содержимое элементов раскидать по input'ам

#javascript #jquery

Есть верстка такого плана


    

        
07.08.2018
        
Название-1
        
Описание-1
    
    

        
07.08.2018
        
Навазние-2
        
Описание-2
    
                      



Тут я показал 2 блока item. На практике их может быть от нуля до бесконечности (условно).

Необходимо содержимое раскидать это по инпутам, что-то вроде такого:


    

    
    


        

            
            
            
        

        
Remove
    
    


        

            
            
            
        

        
Remove
    
    



Т.е. рассортировать содержимое блоков по соответствующим полям и пронумеровать каждый
цикл, начиная с нуля.

За классы цепляться можно. Обертке td у полей тоже можно добавить класс для простоты
обращения, если требуется.

Буду признателен js или jq (тут надо использовать each?) вариант исполнения.
    

Ответы

Ответ 1

$(function () {
var tbody = $('table.wrapper tbody');
$('.wrap .item').each(function(index) {
  var line1 = $(this).find('.item_line_l_col').html();
  var line2 = $(this).find('.item_line_c_col').html();
  var line3 = $(this).find('.item_line_r_col').html();
  
  tbody.append(`

        Iteration N ${index}
            
            
            
        

        Remove
    `)
})

})


    

        
07.08.2018
        
Название-1
        
Описание-1
    
    

        
07.08.2018
        
Навазние-2
        
Описание-2
    








Если нужно, то можно вместо шаблона создавать элементы на каждой итерации цикла.
Тогда будет удобно навесить обработчики на Remove


Ответ 2

JS: 


(function(){document.querySelectorAll('.wrap .item').forEach(
	function (item, index) {
	var date = item.querySelector('.item_l_col').innerText,
		name = item.querySelector('.item_line_c_col').innerText,
		desc = item.querySelector('.item_line_r_col').innerText,
		tr = document.createElement('tr');
		table = document.querySelector('.wrapper tbody');
	
	tr.innerHTML = `
	
	
	
	Remove
	`;

	table.append(tr);
})}())

    

        
07.08.2018
        
Название-1
        
Описание-1
    
    

        
07.08.2018
        
Навазние-2
        
Описание-2