#javascript #clone #appendto
#javascript #клонировать #appendto
Вопрос:
Вау. Оба варианта сработали отлично. Спасибо!!!
Еще один последующий вопрос. Допустим, у меня было 4 разных раздела Tabcontent с уникальными классами. И я хочу добавить класс Getit ко всем разделам tabcontent…
Если я просто добавляю ‘tabcontent’ к ‘tabcontent’, это добавляет его в конец всех разделов ‘tabcontent’, что здорово. НО тогда у меня дублируется тот же контент с идентификатором GetIt. Как я могу сделать так, чтобы, если кто-то выбрал GetIt в моей навигации с вкладками, клон не появлялся, но он появлялся во всех других классах tabcontent?
Вот в чем была моя первоначальная проблема:
Во-первых, позвольте мне сказать, что я не очень хорошо знаю Javascript. Просто пытаюсь собрать что-то воедино здесь.
Моя проблема заключается в следующем:
Я хочу взять один идентификатор Div, клонировать его и добавить к другому идентификатору Div без изменения какого-либо содержимого.
HTML выглядит следующим образом:
<div class="tabcontent" id="Getit"> Buy my widgets</div>
<div class="tabcontent" id="History"> History of my widgets</div>
Я хочу скопировать / клонировать идентификатор ‘Getit’ и добавить его в конец идентификатора ‘History’.
В настоящее время мой код Javascript выглядит следующим образом:
$('#tabcontent .Getit').clone().appendTo('#tabcontent .History');
Я ценю любую помощь, которую вы можете предложить.
Спасибо!
Комментарии:
1.
.это селектор класса,#это селектор идентификатора..Getitвернет вам массив выбранных элементов класса, а неidвыбранный элемент. Попробуйте#Getit. То же самое касается#History. Кроме того, вы хотите использовать#Getit.tabcontentи#History.tabcontent(обратите внимание, без пробела, который является потомственным селектором), чтобы выбрать элемент с обоими.2. Обратите внимание, что вы должны явно установить идентификатор клонированного элемента на что-то другое. (Не должно быть более одного элемента с одинаковым идентификатором.)
3. Спасибо! Это сработало так хорошо! Есть ли шанс, что вы могли бы взглянуть на обновленный вопрос теперь, когда я немного лучше понимаю это?
4. @Perry — Я бы предпочел, чтобы вы повысили рейтинг ответов и отметили один из них в качестве ответа, а также открыли новый вопрос с новым запросом.
Ответ №1:
Ваш селектор '#tabcontent .Getit' выполняет поиск всех .Getit элементов, которые являются дочерними от #tabcontent . Я не думаю, что это то, чего вы хотите.
Это должно сработать:
$('#Getit').clone( true ).appendTo('#History');
Вызов .clone() с параметром true также приводит к клонированию всех подключенных данных и событий. Однако это необязательно.
Комментарии:
1.
document.getElementByID("History").appendChild(document.getElementById("GetIt").cloneNode(true));2. не произносите запрещенное слово в моих комментариях!
3. Правильно, когда это селектор идентификаторов, вам не нужны предки. Всегда забываю об этом, когда я смотрю на другой код.
Ответ №2:
. это селектор класса, # это селектор идентификатора. #tabcontent ищет элемент с уникальным идентификатором, .Getit вернет вам массив выбранных элементов класса, а не элемент с идентификатором выбранного элемента.
Попробуйте .tabcontent#Getit . То же самое касается #History . Вы хотите выполнить обратное действие #Getit.tabcontent и #History.tabcontent или (обратите внимание, без пробела, который является потомственным селектором), чтобы выбрать элемент с обоими.
<div class="tabcontent" id="Getit"> Buy my widgets</div>
<div class="tabcontent" id="History"> History of my widgets</div>
$('.tabcontent#Getit').clone().appendTo('.tabcontent#History');
Обратите внимание, вам также захочется как-то разобраться с id атрибутом clone. Например:
$('.tabcontent#Getit').clone().attr('id','test').appendTo('.tabcontent#History');
Комментарии:
1. Спасибо! Это сработало так хорошо! Есть ли шанс, что вы могли бы взглянуть на обновленный вопрос теперь, когда я немного лучше понимаю это?