遍历 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 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());
});

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