Question

在今天之前，我认为getElementById和$（'＃element'）完成了同样的事情。但是，当我尝试以下内容时：

// Assuming I have jQuery imported already

var $scrollHolder = $('#element');
var scrollDiv = document.getElementById("element");

scrollDiv.scrollTop = scrollDiv.scrollHeight;
//$scrollHolder.scrollTop = $scrollHolder.scrollHeight;

注释行无效，未注释的行也没有用。上面列出的两种方法是否会返回不同的内容，或者我的代码中是否有错误？评论专线应该有效吗？我很困惑，很欣赏洞察力。谢谢。

Answer 1

你必须从jQuery Object获取DOM元素

$scrollHolder[0].scrollTop = $scrollHolder[0].scrollHeight;

或

.get( index )

$scrollHolder.get(0).scrollTop = $scrollHolder.get(0).scrollHeight;

$('#element');是jQuery Object。它创建一个匹配的对象数组。但是在这里你有id-selector所以你只能得到一个Object，你可以使用数组索引[index]或.get(index)来引用Native DOM对象。

document.getElementById("element");是本机DOM对象

<强> FYI

jQuery的做法。

.scrollTop()

.prop()

$scrollHolder.scrollTop($scrollHolder.prop('scrollHeight'));

Answer 2

$('#id)返回没有本机DOM属性的jquery对象，document.getElementById('id')返回一个具有scrollTop属性的本机DOM元素。

请注意，您可以通过使用$( )包装任何DOM元素来充当jquery对象，并且可以通过访问索引将jquery对象设置为DOM元素。

Answer 3

另一个解决方案是使用正确的jQuery-Wrapper：

$scrollHolder.scrollTop($scrollHolder.scrollHeight);

Answer 4

JQuery选择器方法总是返回一个元素数组。因此评论的行不会返回您的期望。

getElementById vs $（＆＃39; #lement＆＃39;）

4 个答案: