Loop над массивом и создавать теги ввода формы после меток

Question

Im пытается перебрать массив, чтобы создать теги формы, в зависимости от того, сколько значений есть в массиве. Пока у меня есть метки и теги ввода, которые создаются. Проблема, с которой я сталкиваюсь, корректно отображает входные теги после ярлыков. Любая помощь приветствуется!

Я пытаюсь добиться:

<label class="material-label" for="leather_materials"> 
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather"> 
<label class="material-label" for="suade_materials"> 
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade"> 
<label class="material-label" for="nubuck_materials"> 
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck"> 

мой код до сих пор:

materialArray = ['leather','suade','nubuck']; 

//loop over material array 
for(i = 0; i < materialArray.length; i++) { 

    //create label elements 
    var matLabel = document.createElement('label'); 
    matLabel.setAttribute('for', materialArray[i] + '_materials'); 
    matLabel.setAttribute('class', 'material-label'); 
    console.log(matLabel); 

    //add text to label elements 
    var matLabelTextNode = document.createTextNode(materialArray[i]); 
    matLabel.appendChild(matLabelTextNode); 

    //create input elements 
    var matInput = document.createElement('input'); 
    matInput.className = 'shoe-materials'; 
    matInput.setAttribute('class', 'shoe-materials'); 
    matInput.setAttribute('id', materialArray[i] +'_materials'); 
    matInput.setAttribute('name', 'materials'); 
    matInput.setAttribute('type', 'radio'); 
    matInput.setAttribute('value', materialArray[i]); 
    console.log(matInput); 

    //append to parent div 
    addMaterials.appendChild(matLabel);  
    $('.material-label').after(matInput);   
} 

Я попытался с помощью JQuery после(), но он пошел немного перепутались и получил следующий

<label class="material-label" for="leather_materials">leather</label> 
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck"> 
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade"> 
<input id="leather_materials" class="shoe-materials" type="radio" name="materials" value="leather"> 
<label class="material-label" for="suade_materials">suade</label> 
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck"> 
<input id="suade_materials" class="shoe-materials" type="radio" name="materials" value="suade"> 
<label class="material-label" for="nubuck_materials">nubuck</label> 
<input id="nubuck_materials" class="shoe-materials" type="radio" name="materials" value="nubuck"> 

Answer 1

Change '.material-метка' для matLabel

$(matLabel).after(matInput); 

Вот это JSFiddle: https://jsfiddle.net/82o6hfna/

Answer 2

Ошибка, которую вы делаете, добавляет эти элементы после элемента .material-label. Поэтому вы продолжаете добавлять их после ярлыков, которые уже имеют этот класс.

От:

$('.material-label').after(matInput); 

To:

$(matLabel).after(matInput); 

Обновленный код:

var addMaterials = document.getElementById("addMaterials"); 
 
materialArray = ['leather','suade','nubuck']; 
 

 
//loop over material array 
 
for(i = 0; i < materialArray.length; i++) { 
 

 
    //create label elements 
 
    var matLabel = document.createElement('label'); 
 
    matLabel.setAttribute('for', materialArray[i] + '_materials'); 
 
    matLabel.setAttribute('class', 'material-label'); 
 
    console.log(matLabel); 
 

 
    //add text to label elements 
 
    var matLabelTextNode = document.createTextNode(materialArray[i]); 
 
    matLabel.appendChild(matLabelTextNode); 
 

 
    //create input elements 
 
    var matInput = document.createElement('input'); 
 
    matInput.className = 'shoe-materials'; 
 
    matInput.setAttribute('class', 'shoe-materials'); 
 
    matInput.setAttribute('id', materialArray[i] +'_materials'); 
 
    matInput.setAttribute('name', 'materials'); 
 
    matInput.setAttribute('type', 'radio'); 
 
    matInput.setAttribute('value', materialArray[i]); 
 
    console.log(matInput); 
 

 
    //append to parent div 
 
    addMaterials.appendChild(matLabel);  
 
    $(matLabel).after(matInput);   
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 

 
<div id="addMaterials"></div>

Answer 3

Оператор JQuery $('.material-label') выбирает каждый элемент с этим классом, поэтому, когда вы используете $('.material-label').after(matInput), вы добавляете содержимое matInput после каждого из трех меток.

Чтобы получить текущую метку, просто используйте i в качестве индекса для массива, возвращаемого $('.material-label').

Изменение

//append to parent div 
addMaterials.appendChild(matLabel); 
$('.material-label').after(matInput); 

Для

//append to parent div 
currentLabel = $('.material-label')[i]; 
$(currentLabel).after(matInput);  

получите результаты, которые вы хотите.

Answer 4

Мне никогда не нравился подход к манипуляции с объектом для построения html. Мне нравится строить строку html, а затем вставлять ее в dom. Просто мое мнение.

JS

//to uppercase of first letter only 
String.prototype.toUpperCaseFirstLetter = function() { 
    var s = this; 
    return s.length > 0 ? s.charAt(0).toUpperCase() + s.slice(1) : s; 
} 

var materialArray = ['leather','suade','nubuck']; 

function buildMaterialRadios() { 
    var str = ''; 
    for (var i = 0; i < materialArray.length; i++) { 
     var item = materialArray[i]; 
     str += '<label class="material-label" for="'+item+'_materials">'+item.toUpperCaseFirstLetter()+'</label><input id="'+item+'_materials" class="shoe-materials" type="radio" name="materials" value="'+item+'">'; 
    }; 

    document.getElementById('material_selections').innerHTML = str; 
} 


buildMaterialRadios(); 

HTML

<form name="shoebuilderform"> 

<div id="material_selections"></div> 

</form> 

http://jsfiddle.net/qcmdnd4d/