如何将无序列表的最后一个元素输出到控制台

Question

我试过这个代码：

<script type="text/javascript">
$lastElement=$( "ul li" ).last();
console.log($lastElement);
</script>

这是列表：

<ul id="cool-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

我期望控制台上的输出item3。相反，它显示r.fn.init [prevObject: r.fn.init(0)]。

这似乎是一个OOP概念，我不理解。有更简单的方法吗？还是我做错了？

Answer 1

通常，当您使用jQuery方法选择、查找或筛选元素集合时，您会得到一个新元素的jQuery集合作为回报。这就是这里正在发生的事情。$lastElement不是HTMLElement；它是一个jQuery集合，一个包含一个元素的集合。

作为回报，它提供了一个jQuery集合，因为您可能希望对结果使用其他jQuery方法。

如果要提取元素，请访问集合的第[0]个元素：

$lastElement = $("ul li").last();
console.log($lastElement[0]);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="cool-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

如果您只想要找到的元素的文本，请使用jQuery方法.text()：

$lastElement = $("ul li").last();
console.log($lastElement.text());

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="cool-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>

但这是一项非常愚蠢的琐碎任务，需要jQuery来完成。您可能会发现从香草JS的基础知识开始更容易：可以使用querySelector:选择元素

const lastElement = document.querySelector("ul li:last-child");
console.log(lastElement.textContent);

<ul id="cool-list">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>