javascript - 将 Javascript 数组更改为字符串

Question

我在 JavaScript 中有以下数组

("error", "No name entered", "Invalid Email", "No Message")

数组也可以

("success", "Your message has been sent.")    

我想创建一个看起来像这样的字符串

<div class="error">
<ul>
    <li>No Name entered</li>
    <li>Invalid Email</li>
    <li>No Message</li>
</ul>
</div>

数组中的第一项用于 div 类，其余的将是列表项，

我试过使用 formData[0]、formData[1] 等，但如果数组项不存在，那只会打印 undefined。

Answer 1

你可以做

var array = ["error", "No name entered", "Invalid Email", "No Message"];

function makeDiv(array) {
var newDiv = '<div class="' + array[0] + '"><ul>';

for (var i = 1; i < array.length; i++) {
        newDiv += '<li>' + array[i] + '</li>';
}

newDiv += '</ul></div>';

//append newDiv somewhere

}

Answer 2

我建议：

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body');
        $('<ul />').appendTo(wrapper);
    }
    else {
        $('<li />', { text : formData[i] }).appendTo('div.' + formData[0] + ' > ul');
    }
}

JS 小提琴演示。

但是，正如评论中所指出的，避免每次迭代重新查询 DOM 会更容易，因此此版本维护对各种已创建元素的引用：

var formData = ["error", "No name entered", "Invalid Email", "No Message"];

for (var i = 0, len = formData.length; i < len; i++) {
    if (i == 0) {
        var wrapper = $('<div />', { 'class' : formData[i] }).appendTo('body'),
            ul = $('<ul />').appendTo(wrapper);
    }
    else {
        $('<li />', { text : formData[i] }).appendTo(ul);
    }
}

JS 小提琴演示。

参考：

• appendTo().
• 使用 jQuery 创建 HTML 元素。

Answer 3

这应该为你做：

$('div').addClass(formData[0]);
$('li').each(function(index, el){ $(el).html(formData[index] || '') });

根据评论最好使用 for 循环， http: //jsperf.com/jquery-each-vs-for-loop/73：

var lis = $('li');
for( int i = 0; i < lis.size(); i ++ ){
  var li = lis.eq(i);
  li.html(formData[i] || '');
}

Answer 4

你会发布你的数组的变量名吗？这可能是由于参考错误/分配错误。

同时，一个简单的 for 循环可以解决问题，但您可能还想研究 JavaScript模板。它可以使这样的事情变得更加简单。

这是一个可以帮助你的 JS Fiddle：http: //jsfiddle.net/HepFw/

var failureMessage = ["error", "No name entered", "Invalid Email", "No Message"],
    successMessage = ["success", "Your message has been sent."];


function getMarkup ( resultArray ) {
    var markup = "";

    for ( var i = 0, loopCount = resultArray.length; i < loopCount; i++) {
        if ( i === 0 ) {
            markup += '<div class="' + resultArray[i] + '"><ul>';
        }
        else {
            markup += '<li>' + resultArray[i] + '</li>';
        }    
    }

    return markup += '</ul></div>';   
}

document.getElementById('so-example-success').innerHTML = getMarkup( successMessage );
document.getElementById('so-example-failure').innerHTML = getMarkup( failureMessage );

Answer 5

var formData = ["error", "No name entered", "Invalid Email", "No Message"]
  , first = formData.shift()
  , elem = $('<div />').addClass(first)
  , ul = $('<ul />').appendTo(elem)

 $.each(formData, function( ind, item ) {
    $('<li />').text(item).appendTo(ul)
 })

 // now elem has your DOM element