模仿另一个的HTML元素

时间:2013-11-07 12:29:36

标签: javascript html html5 dom

听起来很疯狂,但我只是想知道我是否可以拥有一个元素(任何东西,小的或复杂的),然后在其他地方有一个克隆元素,它模仿第一个元素上所有被改变的东西。

我知道使用Javascript& amp;可以轻松实现这样的事情。 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

etc ...并且每个元素的EACH属性都是COPIED。那是.baseURI和.clientWidth的1000份副本吗?如果是这样。那肯定非常糟糕。

如果有一个元素,则会有一个.attributes,.children等,所有克隆元素都会使用它们。

修改

好的,更多澄清。

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

它可能是HTML5规范的一个

2 个答案:

答案 0 :(得分:1)

你有办法改变一个独特的东西并同时应用于所有元素,这是一个:

CSS。

如果您有很多相同的课程,例如: .testclass ,并且您想要更改所有背景颜色, 首先,创建一个名为 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。)

答案 1 :(得分:0)

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

  

迭代jQuery对象,为每个匹配的对象执行一个函数   元件。

示例:

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

Demo

更新:

你也可以这样做:

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