4

听起来很疯狂，但我只是想知道我是否可以有一个元素（任何东西，小或复杂），然后在其他地方有一个克隆元素，它绝对模仿第一个元素上更改的所有内容。

我知道使用 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

等等......并且每个元素的每个属性都被复制。那是1000份，.baseURI对.clientWidth吗？如果是这样。这肯定是非常糟糕的。

如果有 ONE 元素，就会有 ONE .attributes、.children 等，所有克隆的元素都会使用它们。

编辑

好的，更多的澄清。

假设您有一个动态选择框，其选项可以根据事件驱动的 javascript/ajax 应用程序中可能发生的各种事件而改变，然后您必须在页面的不同位置拥有同一个选择框的多个副本。处理一个选择框会更有效率，并让所有其他 html 副本自动更改，而无需使用 JavaScript 处理它们。我认为这显然必须是某种原生支持，但我什至不确定这种原生支持是否存在。

它可能是 HTML5 规范之一

4

2 回答 2

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一起度过了一段时间。）

于 2013-11-07T13:11:52.887 回答
0

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

遍历一个 jQuery 对象，为每个匹配的元素执行一个函数。

例子：

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

演示。

更新：

你也可以这样做：

$("<style>")
        .prop("type", "text/css")
        .html("\
        .class {\
        color: blue;\
        }")
        .appendTo("head");
于 2013-11-07T12:36:17.070 回答