Question

假设我有一个动态创建的列表项

<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>

所有这些项目都被推送到数组var itemArray= [];

问题是我有另一个数组

var array2= [];

使用itemArray.push(array2)

将动态创建的“li”推入itemArray

每当我使用以下代码附加它

$('<ul/>', {

   html: itemArray.join('')
}).appendTo('#left_div');

我得到以下显示

[object HTMLLIElement]

来自array2的项目

Answer 1

当您致电itemArray.join('')时，您会使用toString()方法隐式地将所有元素投射到字符串。正如您所发现的，这只会返回[object HTMLLIElement]。

你应该做的只是使用.append(itemArray)，它允许一系列DOM元素：

$('<ul/>', {}).append(itemArray).appendTo('#left_div');

此外，您可能会错误地附加array2。您可能希望使用concat()代替，这允许合并两个数组。现在发生的事情使它看起来像[<li>,<li>,<li>,[<li>,<li>,<li>]]，而不是单个平面阵列：

itemArray = itemArray.concat(array2);

Answer 2

当你将一个数组.push()放入另一个数组时，它不会像你想的那样将一个数组附加到另一个数组的末尾。 itemArr.push(array2);方法的输出如下所示：

0: jQuery.fn.jQuery.init[1]
1: jQuery.fn.jQuery.init[1]
2: Array[2]

..请注意，整个array2已添加为itemArray ...

中的项目

您要找的是$.merge():

$.merge(itemArray, array2);

然后，最后，假设您的列表项已添加到数组中，而不是作为字符串，而是作为动态呈现的元素（如您所说），您应该能够简单地将.append()合并后的数组添加到{{1} （或动态生成的ul）。

示例：

<ul>

// setup: dummy list item arrays
var li = $('<li>'),
    item1 = li.clone().append('item1'),
    item2 = li.clone().append('item2');

var li2 = $('<li>'),
    item3 = li2.clone().append('item3'),
    item4 = li2.clone().append('item4');

var arr1 = [];
arr1.push(item1);
arr1.push(item2);

var arr2 = [];
arr2.push(item3);
arr2.push(item4);


// merge!
$.merge(arr1, arr2);


// create a ul element dynamically
var ul = $('<ul>');

// add your items:
ul.append(arr1);

// render the ul
$('body').append(ul);

将一个数组推入另一个数组时'[object HTMLLIElement]'

2 个答案: