我正在尝试使用JavaScript构建一系列水果,为此,我需要获取li
元素的所有ul
个子元素的文本值。我取得了一些进步,因为我能够找到我的名单上的孩子数量。
$("#fruits-list > li").length
=> 6
我也可以按索引查找元素。在这里,我找到了使用此
的第一个元素$("#fruits-list > li")[0]
=> <li id="apple">Apple</li>
我能够获得元素,但我无法获得它的测试值。在这里,我试图获得文本值apple
,我已经尝试了几乎所有内容。我试过了
$("#fruits-list > li")[0].text
$("#fruits-list > li")[0].html
$("#fruits-list > li")[0].val
我为这三个人得到了undefined
。我还尝试在所有这些内容中添加()
,但获得了TypeError: Is not a function
。
我在SO上找不到答案。任何帮助表示赞赏。提前谢谢。
答案 0 :(得分:6)
当您在jQuery元素上使用带有索引的括号表示法时,您将获得一个DOM元素。无法直接使用jQuery函数调用这些对象。请改用eq。
使用
$("#fruits-list > li").eq(0).text()
请注意,如果您的最终目标是构建LI元素文本的数组,那么您可以简单地执行
var arr = $("#fruits-list > li").map(function(){ return $(this).text() }).get();
答案 1 :(得分:2)
text
,html
和val
不是DOM的属性,它们是jQuery方法。
你可以简单地做一个自然的JS方法。
document.querySelector("#fruits-list > li").textContent; //or innerText for legacy IE
querySelector
返回元素列表的第一项。 (但是,如果你使用jQuery,我建议使用dystroy的答案)
答案 2 :(得分:1)
当您访问$("#fruits-list > li")[0]
时,您将获得一个HTMLElement
对象,这就是您无法使用jQuery函数的原因。 dystroy的解决方案让你使用jQuery来获取文本,因为eq
返回一个jQuery实例。你也可以
$("#fruits-list > li")[0].textContent