如何將 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)

盡管如此，我仍然想知道為什么有必要指定一個索引，其中一個對象是唯一的，因為$('#consoleDisplay')表示法尋找一個ID 。

ID 不是必須的 UNIQUE 嗎？？

感謝您的幫助和解釋。

Answer 1

您的第二個示例不起作用，因為變量保存 jQuery 對象，而不是第一個示例中的 Element 對象。 因此，它們沒有innerHTML屬性。

要使用 jQuery 對象執行您需要的操作，請使用html()方法：

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

我建議您熟悉jQuery 文檔以了解哪些方法可用，因為它們與 Element 上可用的方法有很大不同。

Answer 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;

關於您的編輯：上述代碼段不起作用可能有多種原因。 通常對於此類問題，如果您直接在<head>執行該代碼而不將其包圍在文檔就緒回調中，則代碼將在瀏覽器到達時立即執行，但 DOM 中的元素尚未創建。 為避免使用回調，您可以嘗試將您編寫的 javascript 代碼移至頁面底部。

這是一個很好的舊文檔就緒回調：

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

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

如何將 jQuery 選擇器存儲在變量中？

問題描述

2 個解決方案

解決方案1
2 2020-03-26 21:49:49

解決方案2
1 已采納 2020-03-26 22:11:14

如何將 jQuery 選擇器存儲在變量中？

問題描述

2 個解決方案

解決方案1 2 2020-03-26 21:49:49

解決方案2 1 已采納 2020-03-26 22:11:14

解決方案1
2 2020-03-26 21:49:49

解決方案2
1 已采納 2020-03-26 22:11:14