Question

我的项目中有以下代码

HTML：

<input type="text" id="Num">
<input type="button" value="Insert Div" onClick="insertDiv(getElementById('Num').value)" />
<div class="container">
<div id="main">All starts from here</div>
</div>

使用Javascript：

lookupdata=[
{"id":2,"st":[{"label":"Audi","value":10},{"label":"BMW","value":70}]},
{"id":16,"st":[{"label":"Benz","value":40},{"label":"BMW","value":20}]},
{"id":8,"st":[{"label":"AUDI","value":60},{"label":"Tesla","value":70}]},
{"id":5,"st":[{"label":"MZ","value":30},{"label":"Honda","value":40}]}
];

function insertDiv(Num){
    var ar1=Num.replace('[', '');
    ar1=ar1.replace('[', '');
    ar1=ar1.replace(']', '');
    ar1=ar1.replace(']', '');
    alert(ar1);
    var array = JSON.parse("[" + ar1 + "]");
    alert(JSON.stringify(lookupdata,null,2));
    var i=0;
        for(i;i<array.length;i++)
        {
            $( "<div id='sp"+array[i]+"'>This is div with id "+array[i]+"<div class='st'></div></div>" ).insertAfter( "#main");
        }
}

使用上面的代码，我可以为输入字符串数组动态创建div - 示例：如果我输入[[8,2,5]]，它会创建三个带有id＆＃39; s的div - 8,2,5

但是，我想从名为＆＃39; lookupdata＆＃39;的对象中插入st值。进入相应的id div。

这样做的目的是，我想使用st作为内部div中图表的输入（使用类＆＃39; st＆＃39;）。

我该怎么做？

以下是工作演示 - https://www.liferay.com/community/forums/-/message_boards/message/54666240

Answer 1

您可以使用jQuery的grep函数来搜索数组。

function getObjContents(i){
  var arr = $.grep(input, function(e){ 
    return e.id == i; 
  });
  var str="";
  for (var i = 0; i < arr[0].st.length; i++) {
    str += JSON.stringify(arr[0].st[i]);
  }
  return str;
}

你会这样称呼：

$( "<div id='sp"+array[i]+"'>This is div with id "+array[i]+getObjContents(Num)+"<div class='st'></div></div>" ).insertAfter( "#main");

Demo

难以将对象作为innerHTML添加到javascript / jquery中动态创建的div

1 个答案: