模仿另一個的 HTML 元素

Question

聽起來很瘋狂，但我只是想知道我是否可以有一個元素（任何東西，小的或復雜的），然后在其他地方有一個克隆元素，它完全模仿第一個元素上發生的所有變化。

我知道使用 JavaScript 和 jQuery 可以輕松實現類似的功能。 但是，我想到的任何解決方案都涉及每個變量（或獨立修改的單獨元素實例）

例如

<div class="class"></div>
<div class="class"></div>
<div class="class"></div>

$('.class').css('color','blue');

這段 javascript / jQuery 將選擇每個元素實例，並將藍色分別應用於每個元素。

我想知道的是，如果有一種方法可以改變一個單一的元素，那將反映在元素副本上。

所以克隆元素不會有自己的可以單獨更改的屬性。 他們從字面上使用原始元素的屬性。 當原始元素屬性被修改時，克隆也會被修改，因為它們的內部狀態引用了原始元素。

這樣的構造存在嗎？

我的推理是這樣的：

如果你有 1000 個元素。 每個元素都很大。 一個元素包含如下內容：

.attributes
.baseURI
.childNodes
.children
.className

等等...並且為每個元素復制了每個屬性。 那是.baseURI和.clientWidth的 1000 個副本，對嗎？ 如果是這樣。 那肯定是非常糟糕的。

如果只有一個元素，就會有一個.attributes、.children 等，所有克隆的元素都會使用它們。

編輯

好的，更多說明。

假設您有一個動態選擇框，其選項可以根據事件驅動的 javascript/ajax 應用程序中可能發生的各種事件而改變，然后您必須在頁面上的不同位置擁有同一個選擇框的多個副本。 處理一個選擇框，並讓所有其他 html 副本自動更改，而無需使用 JavaScript 處理它們，效率會高得多。 我認為這顯然必須是某種本地支持，但我什至不確定是否存在此類本地支持。

它可能是 HTML5 規范之一

Answer 1

你有辦法改變一個獨特的東西並同時應用於所有元素，這是一個：

CSS。

如果你有很多相同的類，例如： .testclass並且你想改變所有的background-color ，首先，創建一個名為test.css的文件，把它放到頁面的同一個根文件夾中。

將此 css 放入您的test.css ：

.testclass{ background-color: red;}

執行該 javascript 代碼：

$('head').append( $('<link rel="stylesheet" type="text/css" />').attr('href', 'test.css') );

然后 javascript 將使頁面加載一個新的 css，其中包含應用於所有具有.testclass類的元素的背景顏色代碼。

這樣您就不會進行迭代並同時應用於所有元素。

--編輯--

我明白你想要什么。 我已經找到了如何克隆 DOM，我克隆了一個，然后確實附加到了正文，看看這個：

$('your_select_identifier').change(function(e){ //when your select has changed...
  $('the_other_select').remove();//here i removed the old one.
  document.body.appendChild($('your_select_identifier')[0].cloneNode()); //here i cloned the DOM Node of your main select and did append on the document body as the new select.
});

我希望你可以用它做你想做的事情:)（我已經花了一段時間和那個 kkk 在一起。）

Answer 2

如果我理解正確，您可以使用.each() 。

迭代一個 jQuery 對象，為每個匹配的元素執行一個函數。

例子：

$('.class').each(function() {
  $(this).css('color','blue');
});

演示。

更新：

你也可以這樣做：

$("<style>")
        .prop("type", "text/css")
        .html("\
        .class {\
        color: blue;\
        }")
        .appendTo("head");

Answer 3

我認為您正在尋找的是適用於所有這 1000 個元素的 CSSStyleRule。 您只需更改一個 CSSStyleRule 的一個屬性，而無需遍歷所有這 1000 個元素並更改每個元素的樣式屬性。

例如，它可能看起來像這樣：

const style = document.createElement("style");
document.head.appendChild(style);

const color = [255, 255, 255];
const incrementor = [-1, -1, -1];
style.textContent = `
    .class {
        color: rgb(${color.join(",")});
    }
`;

const cssRule = style.sheet.cssRules[0]; // instanceof CSSStyleRule

requestAnimationFrame(function changeColor () {

    cssRule.style.backgroundColor = `rgb(${color.join(",")})`;

    const index = Math.floor(Math.random() * 3);
    color[index] += incrementor[index];
    if (color[index] === 0) incrementor[index] = 1;
    else if (color[index] === 255) incrementor[index] = -1;

    requestAnimationFrame(changeColor);
});