在jQuery中迭代數組並打印li元素的文本

Question

我已經看到Won't Iterate Over Array In jQuery和iterate over array in jquery但這些帖子都沒有解決我的問題。

我只是想遍歷數組，並在控制檯中打印它的值。

這是我的代碼：

var arr= $('#mainmenu3 > ul li').toArray(); 

        for (var i = 0; i < arr.length; i++) { 
         console.log(arr[i].text()); 
        } 

這裏是HTML：

<li id="mainmenu3"> 
<a class="menu" href="" id="1">MainMenu3<span class="caret"></span></a> 
    <ul class=""> 
     <li><a href="" title="">1_SubMenu3</a></li> 
     <li><a href="" title="">2_SubMenu3</a></li> 
     <li><a href="" title="">3_SubMenu3</a></li> 
     <li><a href="" title="">4_SubMenu3</a></li> 
    </ul> 
</li> 

我收到此錯誤：

TypeError: arr[i].text is not a function 

Answer 1

這是因爲你想使用jQuery的方法（在這種情況下，.text()）在非jQuery object上。

由於arr[i]沒有.text()方法，你可以改變

arr[i].text() 

到：

$(arr[i]).text() 

Updated Example

在這種情況下，你也不要有使用.toArray()：

var arr = $('#mainmenu3 > ul li'); 

for (var i = 0; i < arr.length; i++) { 
    console.log($(arr[i]).text()); 
} 

---

你也可以只訪問使用.textContent文本。在那種情況下，你真的不需要jQuery。如果瀏覽器支持不是一個問題，您可能會將您的jQuery選擇器替換爲.querySelectorAll。

Updated Example

var arr = document.querySelectorAll('#mainmenu3 > ul li'); 

for (var i = 0; i < arr.length; i++) { 
    console.log(arr[i].textContent); 
} 

---

如果你想使用jQuery一路，只需使用.each()方法：

Updated Example

$('#mainmenu3 > ul li').each(function() { 
    console.log($(this).text()); 
}); 

Answer 2

arr[i]是平原HTMLElement不具有text()方法，您需要將HTMLElement轉換爲jQuery對象，像這樣

for (var i = 0; i < arr.length; i++) { 
    console.log($(arr[i]).text()); 
} 

Example

但在我們的情況下更好地運用.each，像這樣

$('#mainmenu3 > ul li').each(function() { 
    console.log($(this).text()); 
}); 

Example