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

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

Answer 2

这是因为您尝试在非jQuery object上使用jQuery方法（在本例中为.text()）。

由于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());
});

在jquery中迭代数组并打印li元素的文本

2 个答案: