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 

и т. Д. ... и атрибут EACH является COPIED для каждого элемента. Это 1000 копий .baseURI и .clientWidth? Если так. Это очень плохо.

Если был ОДИН элемент, то были бы ONE .трибуты, .children и т. Д., И весь клонированный элемент использовал бы их.

EDIT

Хорошо, уточнение.

Скажите, что у вас был динамический блок выбора, параметры которого могут меняться в зависимости от различных событий, которые могут произойти в приложении javascript/ajax, управляемом событиями, а затем вам нужно иметь несколько копий одного и того же блока выбора в разных местах на странице , Было бы намного эффективнее обрабатывать один selectbox, и все остальные html-копии изменяются автоматически, без необходимости обрабатывать их с помощью javascript. Я думаю, что это, очевидно, должно быть какой-то родной поддержкой, но я даже не уверен, существует ли такая нативная поддержка.

Это может быть один для HTML5 спецификации

Answer 1

У вас есть способы изменить уникальную вещь и применить ко всем элементам в то же время, и это одна:

CSS.

Если у вас есть много одинаковых классов, например: .testclass и вы хотите изменить все, цвет фона «с, во-первых, создать файл с именем что-то вроде test.css положить его в ту же корневую папку страницы.

Поместите этот CSS в ваш test.css:

.testclass{ background-color: red;} 

Выполнить этот яваскрипт код:

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

Тогда Javascript сделает загрузку страницы нового CSS, содержащего цвет фона код для применения ко всем элементам, которые имеют класс .testclass.

Таким образом, вы не будете иметь итерацию и применимы ко всем элементам одновременно.

- EDIT -

Я понимаю, что вы хотите. Я нашел, как клонировать 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'); 
}); 

Demo.

Обновлено:

Вы также можете сделать это следующим образом:

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