如何将 jQuery 选择器存储在变量中？

Question

我想知道为什么这种选择 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 是不是必须是唯一的？？

感谢您的帮助和解释。

Answer 1

您的第二个示例不起作用，因为变量包含 jQuery 个对象，而不是第一个示例中的 Element 对象。因此他们没有 innerHTML 属性.

要使用 jQuery 对象执行您需要的操作，请使用 html() 方法：

$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);

我建议您熟悉 jQuery documentation 以查看可用的方法，因为它们与元素上可用的方法有很大不同。

Answer 2

第二段代码中的变量包含 jQuery 个包装 DOM 元素的对象。

所以如果你想设置 innerHTML 属性你可以使用 jQuery 函数 .html().

$consoleDisplayHTML.html(messages.pop().content);
$watchedFolderHTML.html(watchedFolder);

如果您想将内部 HTML 分配给 Dom 元素，您可以从 jQuery 对象中提取包装元素并将其设置为内部 HTML 属性.

$consoleDisplayHTML.get(0).innerHTML = messages.pop().content;
$watchedFolderHTML.get(0).innerHTML = watchedFolder;

关于您的编辑：上述代码段不起作用的原因可能有多种。通常对于此类问题，如果您直接在 <head> 中执行该代码，而不将其包围在文档就绪回调中，代码将在浏览器到达时立即执行，但 DOM 中的元素尚未创建。为避免使用回调，您可以尝试将您编写的 javascript 代码移动到页面底部。

这是一个很好的旧文档就绪回调：

jQuery(function ($) {
    var $consoleDisplayHTML = $('#consoleDisplay');
    var $watchedFolderHTML = $('#watchedFolder');

    $consoleDisplayHTML.html(messages.pop().content);
    $watchedFolderHTML.html(watchedFolder);
});

如何将 jQuery 选择器存储在变量中？

How to store jQuery selector in a variable?

javascript

jquery

jquery-selectors