0

如何动态创建 HTML、循环遍历字符串和列表。我在 $.each, Jquery中的 if 语句中得到了单个字符串的答案，但我相信这本身就值得提出一个问题

$.each(amlData, function (index, item) {
    $('<div class=message><pre><dl><dt>Matched On:</dt><dd>' + item.ItemType +
        '</dd><dt>Date Listed:</dt><dd>' + item.DateListed +
        '</dd><dt>ID:<dt><dd>' + item.ID +
        '</dd><dt>Percentage:</dt><dd>' + item.PercentageMatch +
        '</dd><dt>List:</dt><dd>' + item.List +
        '</dd>' + (item.Gender != null ? '<dt>Gender:</dt><dd>' + item.Gender : '') +
        '</dd>' + (item.Countries.length != 0 ? $.each(item.Countries, function (i, ele) {
        +'<dt>Countries:</dt><dd>' + ele: '')
    }) +
        '</dd></dl></pre></div>').appendTo('div#results');
});

国家以上的所有内容都是一个值，但是，国家（和其他元素）包含多个值。

如何循环遍历多个元素并内联显示它们的内容？

4

1 回答 1

1

在开始创建 jquery 对象之前，您可以进行检查并将字符串存储在变量中 - 使用$.map将返回数组中的值 - 之后您可以使用Array.join('')将其恢复为字符串格式。

var countries = ''; // intialize as empty string
if(item.Countries.length){ // if it has 1 or more
    // map will return this ["<dt>Countries:</dt><dd>USA", "<dt>Countries:</dt><dd>CANADA", "<dt>Countries:</dt><dd>MEXICO"]
    // join makes it this "<dt>Countries:</dt><dd>USA<dt>Countries:</dt><dd>CANADA<dt>Countries:</dt><dd>MEXICO "
    countries = $.map(item.Countries, function (ele) { return '<dt>Countries:</dt><dd>' + ele }).join('');
}
$('<div class=message><pre><dl><dt>Matched On:</dt><dd>test1' +
        '</dd><dt>Date Listed:</dt><dd>test1' +
        '</dd><dt>ID:<dt><dd>test1' +
        '</dd><dt>Percentage:</dt><dd>test1'  +
        '</dd><dt>List:</dt><dd>test1'  +
        '</dd>test1' +
        '</dd>' + countries + // just use variable
        '</dd></dl></pre></div>').appendTo('div#results');

小提琴

如果您只需要一个Countries标题，您可以将国家/地区移动到对象创建中

if(item.Countries.length){
    countries = $.map(item.Countries, function (ele) { return '<dd>' + ele ; }).join('');
}
$('<div class=message><pre><dl><dt>Matched On:<dd>test1' +
        '<dt>Date Listed:<dd>test1' +
        '<dt>ID:<dt><dd>test1' +
        '<dt>Percentage:<dd>test1'  +
        '<dt>List:<dd>test1'  +
        'test1' +
        '<dt>Countries:' + countries +
        '</dl></pre></div>').appendTo('div#results');

小提琴

于 2013-07-29T16:09:10.677 回答