「[對象HTMLLIElement]」推動一個陣列到另一個

當假設我有一個動態創建的列表項「[對象HTMLLIElement]」推動一個陣列到另一個

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

所有這些項都被推入陣列var itemArray= [];

問題是我有另一個數組

var array2= [];

的動態創建的 '禮'

被推入itemArray使用itemArray.push(array2)

每當我追加它使用下面的代碼

$('<ul/>', { 

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

我得到以下顯示

[object HTMLLIElement]

從數組2

來源

2015-05-14 Neel

意思'變種itemArray = [];'？ '{}'表示對象常量，'[]'表示*數組*字面值。你不能'.push（）'一個對象，但你可以推送一個數組。你有沒有看看你的控制檯錯誤？ – wahwahwah

嗨，感謝您的評論。對不起，我的意思是var itemArray = [];我沒有任何控制檯錯誤。但不是來自itemArray的值，我得到[對象HTMLLIElement]。 – Neel

當你調用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);

來源

2015-05-14 15:25:50 Scimonster

當你.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()合併d陣列到<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);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2015-05-14 15:35:15 wahwahwah

「[對象HTMLLIElement]」推動一個陣列到另一個

回答

相關問題