JavaScript - 如何获取 DOM 元素的第一个子元素的文本？

Question

我正在尝试在 JavaScript 中构建一个水果数组，为此，我需要获取 ul 元素的所有 li 子元素的文本值。我已经取得了一些良好的进展，因为我能够找到我的名单上有多少 child 。

$("#fruits-list > li").length
=> 6

我还可以通过索引查找元素。在这里，我使用这个找到了第一个元素

$("#fruits-list > li")[0]
=> <li id="apple">Apple</li>

我能够获取该元素，但无法获取它的测试值。在这里，我试图获取文本值 apple，并且我已经尝试了几乎所有方法。我试过了

1. $("#fruits-list > li")[0].text
2. $("#fruits-list > li")[0].html
3. $("#fruits-list > li")[0].val

我得到了他们三个的未定义。我还尝试在所有内容的末尾添加 () ，但得到 TypeError: Is not a function。

我在这里找不到答案。任何帮助表示赞赏。提前致谢。

Answer 1

当您在 jQuery 元素上使用带有索引的括号表示法时，您将获得一个 DOM 元素。这些对象不能直接使用 jQuery 函数调用。使用eq相反。

使用

$("#fruits-list > li").eq(0).text()

请注意，如果您的最终目标是构建 LI 元素的文本数组，您可以简单地执行以下操作

var arr = $("#fruits-list > li").map(function(){ return $(this).text() }).get();