根据JSON键的数量添加html元素

Question

我正在编写一段代码，我希望根据JSON键：值对的数量生成ResultTable rtSharePointSearchResult = new ResultTable(); KeywordQuery query = new KeywordQuery(clientContext); query.QueryText = "Keywords"; query.TrimDuplicates = false; SearchExecutor searchExecutor = new SearchExecutor(clientContext); ClientResult<ResultTableCollection> results = searchExecutor.ExecuteQuery(query); clientContext.ExecuteQuery(); rtSharePointSearchResult = results.Value[0]; 和span元素。

这是我的HTML：

textarea

加载<div class="modal fade" id="addPropertyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button> <h4 class="modal-title" id="myModalLabel">Add Property</h4> </div> <div class="modal-body"> <div class="input-group input-group-lg"> <span class="input-group-addon">Name</span> <input type="text" id="newProperty" name="newProperty" class="form-control" placeholder="name"> </div> <br/> **<div class="input-group input-group-lg"> <span class="input-group-addon">Value</span> <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea> </div>** </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <input type="submit" id="savePropertyBtn" name="action" value="Save Property" class="btn btn-primary"/> <input type="submit" id="updatePropertyBtn" name="action" value="Update Property" class="btn btn-primary"/> </div> </div> </div> </div> </div> 的脚本是：

newValue

我修改了脚本以从JSON中获取各个值。

我的想法是：在我读取JSON值时递增$(".href-select").click(function() { var propName = $(this).text(); var propVal = $(this).attr('itemprop'); var json = JSON.parse(propVal, 'UTF-8'); var count = 0; for (i in json) { console.log(json[i]); count++; } console.log(count); $("#newProperty").attr('readonly', true); $("#newProperty").val(propName); $("#newValue").val(propVal); $("#savePropertyBtn").hide(); $("#updatePropertyBtn"). }); ，然后使用此值添加count个count＆amp; html中迭代的span个元素。此外，我想在html中添加计数并隐藏它，以便我也可以在textarea对象中获取计数（我将创建一个包含值数的地图）。

请帮助我实现我的想法。

编辑：如果JSON包含两对，这就是预期的结果。

request

编辑2：这就是对话框现在的样子：

值文本框包含JSON。现在我希望文本框看起来像这样：

<div class="input-group input-group-lg">
    <span class="input-group-addon">Value</span>
    <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
    <span class="input-group-addon">Value</span>
    <textarea id="newValue" name="newValue" class="form-control" placeholder="value" style="resize:vertical;" ></textarea>
</div>

Answer 1

您必须先获取div，然后调用append函数。例如，如果您执行了$(".input-group")，那么将为您提供所有类别为input-group的html元素的列表（请注意选择器中类名称之前的句点）。请记住，课程并不是唯一的，所以我的例子只有在你只使用一次课程时才是唯一的。获得所需元素后，即可操作该元素。在这种情况下，您希望将HTML元素添加到div。

$(".input-group").append("<span>Sample html string</span>");

参考文献：

• 附加文档：http://api.jquery.com/append/
• CSS选择器＆＃34;游乐场＆＃34; （附文件）：http://codylindley.com/jqueryselectors/

Answer 2

要复制 - 使用div

粘贴jQuery

function copyDiv(divId) {
    var content = $(divId).html();
    var newdiv = $('<div>');
    newdiv.html(content);
    $(divId).after(newdiv);
    return newdiv;
}

致电copyDiv('#mydiv')会在#mydiv以下创建一个内容相同的div。

jQuery .clone()在这里也很有用。

对于您的情况，可以在循环中调用此函数

for (i in json) {
    var newdiv = copyDiv('#form-div-id');
    ...    // add values to new div like 'i' and json[i]
}