如何将 jQuery 选择器存储在变量中？
Posted
技术标签:
【中文标题】如何将 jQuery 选择器存储在变量中？【英文标题】：How to store jQuery selector in a variable? 【发布时间】：2020-07-07 15:17:43 【问题描述】：我想知道为什么这种选择 DOM 元素的方式有效：
var $consoleDisplayhtml = document.getElementById('consoleDisplay');
var $watchedFolderHTML = document.getElementById('watchedFolder');
而这个不起作用：
var $consoleDisplayHTML = $('#consoleDisplay');
var $watchedFolderHTML = $('#watchedFolder');
填充文本的代码在第一种情况下有效，而不是在第二种情况下：
$consoleDisplayHTML.innerHTML = messages.pop().content;
$watchedFolderHTML.innerHTML = watchedFolder;
在 HTML 中，定义了 ID：
<h4>Console</h4>
<p id="consoleDisplay" class="darken-4 indigo white-text"></p>
<div class="card darken-1 grey">
<div class="card-content white-text">
<span class="card-title">Watched Folder</span>
</div>
<div class="card-action">
<p id="watchedFolder" class="darken-4 indigo white-text"></p>
</div>
...
在页面的<head>部分，声明了jQuery：
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
我做错了什么？
----------------（编辑）
总结一下：
这行得通：
var $consoleDisplayHTML = document.getElementById('consoleDisplay');
var $watchedFolderHTML = document.getElementById('watchedFolder');
$consoleDisplayHTML.innerHTML = messages.pop().content;
$watchedFolderHTML.innerHTML = watchedFolder;
这不起作用：
var $consoleDisplayHTML = $('#consoleDisplay');
var $watchedFolderHTML = $('#watchedFolder');
$consoleDisplayHTML.innerHTML = messages.pop().content;
$watchedFolderHTML.innerHTML = watchedFolder;
这也不行：
var $consoleDisplayHTML = $('#consoleDisplay');
var $watchedFolderHTML = $('#watchedFolder');
$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);
终于成功了：
$consoleDisplayHTML.get(0).innerHTML = messages.pop().content;
$watchedFolderHTML.get(0).innerHTML = watchedFolder;
我现在明白这个符号是一个包装器：
$('#consoleDisplay');
这就是为什么不要忘记指定元素的索引的原因：
.get(0)
尽管如此，我仍然想知道为什么必须在需要对象的地方指定索引UNIQUE，因为$('#consoleDisplay') 表示法会查找ID。
ID 不是必须是唯一的吗？？
感谢您的帮助和解释。
【问题讨论】：
代码有很多方式无法显示您想要的内容，例如您可能将messages.pop().content 和watchedFolder 作为空字符串，因此代码将按预期工作，只是不会告诉你你想要什么。还要注意，如果元素不存在，像 $('#consoleDisplay') 这样的 jQuery 选择器不会失败，当你调用 .html 方法时，它会很高兴地执行但不会改变任何事情。
您必须记住，jQuery 对象包装了与其选择器匹配的任何元素，因此使用您的标记$('.white-text') 将匹配 2 个元素。当您通过其 id 选择一个元素时，您将拥有一个包含 1 个元素的集合的 jQuery 对象，.get(0) 只检索该集合中的第一个元素。同样.get() 返回整个元素集合，在你的例子中是一个包含 1 个元素的数组。
【参考方案1】：
您的第二个示例不起作用，因为变量包含 jQuery 对象，而不是第一个示例中的 Element 对象。因此，它们没有 innerHTML 属性。
要使用 jQuery 对象执行您需要的操作，请使用 html() 方法：
$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);
我建议您熟悉 jQuery documentation 以了解可用的方法，因为它们与元素上可用的方法有很大不同。
【讨论】：
Thanx @rory，我已经尝试过你告诉我的方式，但它不起作用。我编辑了我的帖子以总结哪些有效，哪些无效。 不要忘记将您的 jquery 代码包装在 document.ready 处理程序 learn.jquery.com/using-jquery-core/document-ready 是的，我就是这样做的：【参考方案2】：第二段代码中的变量包含包装 DOM 元素的 jQuery 对象。
所以如果你想设置innerHTML属性你可以使用jQuery函数.html()。
$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);
如果您想将内部 HTML 分配给 Dom 元素，您可以从 jQuery 对象中提取包装的元素并将其设置为 innerHTML 属性。
$consoleDisplayHTML.get(0).innerHTML = messages.pop().content;
$watchedFolderHTML.get(0).innerHTML = watchedFolder;
关于您的编辑：上述 sn-ps 不起作用的原因可能有很多。通常对于此类问题，如果您直接在<head> 中执行该代码而不将其包围在文档就绪回调中，则代码将在浏览器到达时立即执行，但尚未创建 DOM 中的元素。为避免使用回调，您可以尝试将您编写的 javascript 代码移至页面底部。
这是一个很好的旧文档就绪回调：
jQuery(function ($)
var $consoleDisplayHTML = $('#consoleDisplay');
var $watchedFolderHTML = $('#watchedFolder');
$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);
);
【讨论】：
Thanx @minkiele 你对'.get(0)'有很好的感觉，它起作用了。我不知道 $( '#something' ) 符号是 getElementById('something') 的包装。这就是我被屏蔽的原因。以上是关于如何将 jQuery 选择器存储在变量中？的主要内容，如果未能解决你的问题，请参考以下文章