在for循环中添加输入

时间:2017-04-30 12:51:28

标签: javascript jquery

我的代码类似于https://jsfiddle.net/Lcfnxxtv/,我希望标签看起来像那样。

  

儿童人数
      年龄5 - 18“

我希望它分为两行而不是一行(当然,如果可能的话)'5-18岁儿童的数量',但我不知道如何在我的代码中执行此操作。

jQuery(document).ready(function() {
  var array1 = [];
  var array2 = [];
  var array_typ = [];
  var array_dla = [];
  var array_wie = [];
  var array_cen = [];
  var array_licz = [];
  var str = jQuery("#all_str").val();
  array1 = str.split('#');
  var size = array1.length;
  var str1 = "Tax A - child";
  var str2 = "Tax A - elder";
  var str1w = "Number of children";
  var str2w = "Number of elders";
  var html = "</div>";
  var html2 = "";
  for (i = 0; i < size; i++) {

    array2 = array1[i].split('@');
    array_typ[i] = array2[0];
    array_dla[i] = array2[1];
    array_wie[i] = array2[2];
    array_cen[i] = array2[3];

  }
  for (j = 0; j < size; j++) {

    if (array_dla[j] == str1) {

      if (jQuery.inArray(str1w, array_licz) == -1) {

        array_licz[j] = str1w;

      }
    }
    if (array_dla[j] == str2) {

      if (jQuery.inArray(str2w, array_licz) == -1) {

        array_licz[j] = str2w;

      }
    }
  }
  var size2 = array_licz.length;
  for (k = 0; k < size2; k++) {

    html += '    <label for="field[' + k + ']">' + array_licz[k] + ' ages ' + array_wie[k] + ' </label>&nbsp;&nbsp; ';


  }
  for (l = 0; l < size2; l++) {
    html2 += '<input type="text" id="field' + l + '" value=""></input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;';


  }
  html += '</br>';
  html += html2;
  html += '</div>';
  jQuery("#addon").append(html);

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ@Tax A - elder@65-99@1#XYZ@Tax A - child@5-18@2#">

请帮忙

2 个答案:

答案 0 :(得分:0)

您的标签无效。输入是 void 元素,不需要关闭</input>标记 <br><br/>有效。 </br>不是。

你有一个无用的for(l=0; l<size2; l++){

仅使用第一个k 比在CSS中将label设置为display: block;

&#13;
&#13;
jQuery(function( $ ) {

  var array1 = [];
  var array2 = [];
  var array_typ = [];
  var array_dla = [];
  var array_wie = [];
  var array_cen = [];
  var array_licz = [];
  var str = $("#all_str").val();
  array1 = str.split('#');
  var size = array1.length;
  var str1 = "Tax A - child";
  var str2 = "Tax A - elder";
  var str1w = "Number of children";
  var str2w = "Number of elders";
  var html = "";     // </div> ?? You mean Start of a <div>. BTW you have <label> already so ""
  // html2 why??
  
  for (i = 0; i < size; i++) {
    array2 = array1[i].split('@');
    array_typ[i] = array2[0];
    array_dla[i] = array2[1];
    array_wie[i] = array2[2];
    array_cen[i] = array2[3];
  }
  for (j = 0; j < size; j++) {
    if (array_dla[j] == str1) {
      if ($.inArray(str1w, array_licz) == -1) {
        array_licz[j] = str1w;
      }
    }
    if (array_dla[j] == str2) {
      if ($.inArray(str2w, array_licz) == -1) {
        array_licz[j] = str2w;
      }
    }
  }
  
  var size2 = array_licz.length;
  // Why loop twice size2. Loop once
  for (k = 0; k < size2; k++) {
    html += '<label for="field[' + k + ']">' +
    array_licz[k] + '<br>ages ' + array_wie[k] +
    '<br><input type="text" id="field' + k + '" value="">'+
    ' </label>';
  }
  
  $("#addon").append(html);

});
&#13;
label{
  display: block;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="addon"></div>
<input type="hidden" id="all_str" value="XYZ@Tax A - elder@65-99@1#XYZ@Tax A - child@5-18@2#">
&#13;
&#13;
&#13;

您的代码的其他部分也可以改进,但我不知道您对所有这些数组后的内容......

答案 1 :(得分:0)

&#13;
&#13;
$(document).ready(function() {
var array1 = [];
var array2 = [];
var array_typ = []; 
var array_dla = []; 
var array_wie = []; 
var array_cen = []; 
var array_licz = [];
var str = $("#all_str").val(); 
array1 = str.split('#');
var size = array1.length;
var str1 = "Tax A - child";
var str2 = "Tax A - elder"; 
var str1w = "Number of children";
var str2w = "Number of elders"; 
var html = "</div>";
var html2 = [];  
var html3 = [];

for(i=0; i<size; i++){

    array2= array1[i].split('@');
    array_typ[i] = array2[0];
    array_dla[i] = array2[1];
    array_wie[i] = array2[2];
    array_cen[i] = array2[3];

}

for(j=0; j<size; j++){

 if(array_dla[j]==str1){

   if($.inArray(str1w, array_licz) == -1){ 

    array_licz[j]=str1w;

        }
 }
     if(array_dla[j]==str2){

     if($.inArray(str2w, array_licz) == -1){

        array_licz[j]=str2w;

        }
 }
  }
   var size2 = array_licz.length;
for(k=0; k<size2; k++){
html3[k]='<label for="field['+ k +']">'+array_licz[k]+' ages <br>' +array_wie[k] +' </label>&nbsp;&nbsp; <br>';
}
for(l=0; l<size2; l++){ 
  
html2[l]='<input type="text" id="field'+l+'" value=""</input>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<br></br>'; 

}
for(var j=0;j<size2;j++){
html += html3[j]+html2[j];
}
//html+='</br>';
//html+=html2;
html+='</div>';
$("#addon").append(html);  

 });
&#13;
<meta charset="utf-8">

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

	
<div id="addon">
</div> 
<input type="hidden" id="all_str" value="XYZ@Tax A - elder@65-99@1#XYZ@Tax A - child@5-18@2#">
&#13;
&#13;
&#13;

你的问题就是把字符串放在一起的方式。一个简单的解决方案是使用数组,最后你可以更容易地操作它们