Клонирование блоков

@u4en1k · Регистрация: 04.04.2018

Студворк — интернет-сервис помощи студентам

Здравствуйте.
Имеется такой код

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<section class='new-answer answer-1' >
    <hr>
    <div class="row">
        <div class="col-lg-6">
             <div class="text-left">
                <span class="label-search numquestion" style="text-align: left">Question 1</span>
                  <input type="text" value=""  name="question" style="width: 100%;font-weight: normal;" placeholder="Question" class="form-control">
            </div>
        </div>
        <div class="col-lg-6">
            <div class="text-left " >
                <span class="label-search" style="text-align: left">Type of answer buttons:</span>
                <div class="row mt-2"   >
                    <div class="col-lg-3 label-search">
                        <input type="radio" value="1"  name="radio"  class="form-control"> CheckBox
                    </div>
                    <div class="col-lg-3 label-search" >
                      <input type="radio" value="2"  name="radio"   placeholder="Question" class="form-control"> Radio
                  </div>
              </div>
            </div>
        </div>
    </div>
    <hr>
    <div class="row ">
        <div class="col-lg-6">
            <div class="text-left">
                <span class="label-search" style="text-align: left">Answer 1</span>
                  <input type="text" value=""  name="answer[]" style="width: 100%;font-weight: normal;" placeholder="Name" class="form-control">
            </div>
        </div>
 
    </div>
    <div class='block_clone'>
        <div class="row ">
            <div class="col-lg-6">
                <div class="text-left">
                    <span class="label-search numanswer" style="text-align: left">Answer 2</span>
                      <input type="text" value=""  name="answer[]" style="width: 100%;font-weight: normal;" placeholder="Name" class="form-control">
                </div>
            </div>
        </div>
    </div>
    <section class="ans-1">
        <div class='res_clone'></div>
        <div class="row justify-content-center mt-5">
            <div class="col-lg-2">
                     <div class="btn-group" role="group" >
                 <span class='btn btn-green btn-sm bl_clone'  >Add answer</span>
                 <span class='btn btn-green btn-sm bl_remove' >Delete answer</span>
                </div>
            </div>
        </div>
    </section>
    <div class="row ">
         <div class="col-lg-12">
            <div class="text-left">
                <span class="label-search" style="text-align: left">Additional Information</span>
                  <textarea value=""  name="information" style="width: 100%;font-weight: normal;" placeholder="Additional Information" class="form-control"></textarea>
            </div>
        </div>
    </div>
    <div class="row mt-2">
        <div class="col-lg-6">
                   <input type="hidden" name="MAX_FILE_SIZE" value="1572864" />
            <div class="custom-file">
                <input type="file" class="custom-file-input" accept="text/plain" name="file" id="customFile"  />
                <label class="custom-file-label" for="customFile">File upload</label>
            </div>
        </div>
    </div>
</section>
    <div class='answer_clone'></div>
    <div class="row justify-content-center mt-5">
        <div class="col-lg-2 mr-2">
             <div class="btn-group" role="group" >
             <span class='btn btn-green btn-sm ans_clone'  >Add question</span>
             <span class='btn btn-green btn-sm ans_remove' >Delete question</span>
            </div>
        </div>
    </div>

При клике по классу ans_clone клонируется последний блок с классом new-answer

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$('body').on('click','.ans_clone',function(){
        let all = $('.new-answer').length;
        let num = parseInt(all) + 1;
        $('.answer_clone').before($(".new-answer:last").clone());
        $('.numquestion:last').html('Question ' + num);
         
        $(".new-answer").removeClassWild("answer-*");
        $('.new-answer').each(
        
          function(i){
              $(this).addClass('answer-' + (i+1))  ; // тут получаются блоки с классами new-answer answer-1,new-answer answer-2 - родители
              $("[class^='ans-']").removeClass('ans-' + (i+1)); // тут я удаляю все классы которые начинаются на ans
// далее я хочу закрепить их за родителями, то есть у new-answer answer-2 чтобы section имел класс ans-2 и так далее, в зависимости от родителя
// Подскажите, пожалуйста, как это сделать.
 
          });
    });

То есть сначала клонируется один блок, а внутри него можно клонировать еще поля с вопросами, но их нужно привязать к родителям, за счет этого не получается. Подскажите, пожалуйста, как это реализовать, более подробно постарался описать в комментарии.

Добавлено через 3 минуты
И так же еще один вопрос имеется, как клонировать элемент именно в родительский блок. Заранее спасибо.

Добавлено через 28 минут
На первый вопрос я нашел решение,

JavaScript
1
$('.answer-' + (i+1) ).children( ".section_block" ).addClass('ans-' + (i+1));

HTML5
1
<section class="ans-1 section_block">

добавил класс section_block

@u4en1k · 16.10.2021, 12:21 **[ТС]**

Разобрался, неактуально.

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm 8Observer8 30.01.2026 Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .	SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров 8Observer8 29.01.2026 Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .	Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT bedvit 28.01.2026 Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .	SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image) 8Observer8 28.01.2026 Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .

@u4en1k 133 / 118 / 34 Регистрация: 04.04.2018 Сообщений: 593
	16.10.2021, 12:21 [ТС]
	Разобрался, неактуально. 0