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 Fiddle demo

正如评论中指出的那样，每次迭代都避免重新查询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 Fiddle demo

参考文献：

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

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

Answer 5

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

同时，一个简单的for循环可以解决这个问题，但你可能也想看看JavaScript templating。它可以使这样的事情变得更加简单。

这是一个可以帮助你的JS小提琴： 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 );

将Javascript数组更改为字符串

5 个答案: