循环数组并在标签后创建表单输入标签

Question

我试图循环一个数组来创建一些表单标签，这取决于数组中有多少值。到目前为止，我已经获得了正在创建的标签和输入标签。我遇到的问题是在标签之后正确显示输入标签。任何帮助将不胜感激！

我正在努力实现：

<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 after() 但它有点混乱并得到以下结果

<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

您正在做的错误是将这些元素附加到 .material-label 元素之后。因此，您继续在已经具有该类的标签之后添加它们。

发件人：

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

收件人：

$(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 2

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 3

将“.material-label”更改为 matLabel

$(matLabel).after(matInput);  

这里是 JSFiddle：https://jsfiddle.net/82o6hfna/

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/