Как через jQuery клонировать объест с изменение полей?

Question

[rusgayfer]

Вот js для копирования объекта и изменения у него полей

$('.widget-TEXT0').clone()
	.removeClass("widget-TEXT" + i)
	.addClass("widget-TEXT" + i)
	.attr("data-wid-set", action + i)
	.appendTo("#selectedWidgets");

Сам объект который копируется

<div class="box box-default box-success box-solid collapsed-box widget-TEXT0" id="block_text" data-id="1" data-wid-set="text_check" style="display: block;">
            <div class="box-header with-border" style="cursor: pointer;" data-widget="collapse">
              <i class="fa fa-plus" style="display:none"></i>
            <h3 class="box-title">Настройки текста</h3>

              <div class="box-tools pull-right">
			    <button type="button" class="btn btn-box-tool remove" data-action="text_check"><i class="fa fa-trash"></i></button>
                <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-plus"></i></button>
              </div>
              <!-- /.box-tools -->
            </div>
            <!-- /.box-header -->
            <div class="box-body" id="block_text_block" style="display: block;">

<div class="form-group">
					<div class="col-lg-4 control-label">Текст:</div>
						<div class="col-lg-6">
						<input type="text" class="form-control" id="text_val" name="text_val" value="Введите текст">
					</div>
</div>			

<div class="form-group">
<label class="col-lg-4 control-label" for="focusedInput">Шрифт:</label>
 
      <div class="col-lg-6">	
       <select class="form-control" data-font-family="text_check" name="font_family">
			<option value="Arial">Arial</option>
			<option value="Impact">Impact</option>
			<option value="Lobster">Lobster</option>
			<option value="ObelixPro">ObelixPro</option>
			<option value="PosteRetro">PosteRetro</option>
			</select>
	</div>
</div>
			
<div class="form-group">
								<div class="col-lg-4 control-label">Координаты X и Y:</div>
								<div class="col-lg-3">
									<input type="number" class="form-control" data-position-x="text_check" name="x_text" value="" onclick="text_offset()">
								</div>
								<div class="col-lg-3">
									<input type="number" class="form-control" data-position-y="text_check" name="y_text" value="" onclick="text_offset()">

									</div>
</div>

<div class="form-group">
								<div class="col-lg-4 control-label">Размер и цвет шрифта:</div>
								<div class="col-lg-3">
									<input type="number" class="form-control" data-size="text_check" name="size_text" ng-model="w.avatarBorderRadius" value="14">
								</div>
								<div class="col-lg-3">
									<input type="text" class="form-control my-colorpicker1 colorpicker-element" data-color-text="text_check" name="color_text" value="" onclick="colorText()" autocomplete="off">
								</div>
							</div>
      </div>
	   </div>

Как изменить так же в поля в каждом input? То есть изменить по поиску то что находится в div data-wid-set="text_check" Чтобы я так же мог изменить name у input, например на color_text[1] и т д

Comments

[Stalker_RED]

Какую-то дичь вы делаете, может проще в traversing научиться?

[rusgayfer]

Stalker_RED, посмотрел это, не понял как искать в элементе

$("div").children(".widget-TEXT0");

[Mikhail Kupriyanov]

Давайте попробуем лучше понять вашу задачу.
Если вся проблема в изменении name у input, чтобы они могли отправлять массив, то так и запишите name="text_color[]"
Такая запись ну нуждается в изменении.

Если проблема не в этом и надо менять что-то другое, опишите задачу детальнее, пожалуйста.

[Stalker_RED]

rusgayfer,

The .children() method differs from .find() in that .children() only travels a single level down the DOM tree while .find() can traverse down multiple levels to select descendant elements (grandchildren, etc.) as well.

Кроме того,
$("div").children(...) Серьезно? Вы ищете ВСЕ ДИВЫ НА СТРАНИЦЕ а потом в них что-то там выбираете?

[rusgayfer]

Mikhail Kupriyanov, мне нужно у каждого элемента изменить data элемент

Например: data-action="text_check" на data-action="text_check1", data-position-y="text_check" на data-position-y="text_check1" и т д

[rusgayfer]

Stalker_RED, поэтому и спрашиваю, то что я не знаю и не понимаю. Покажите как нужно правильно сделать, дальше сам.

[Stalker_RED]

rusgayfer, эта задача авыглядит такой странной потому, что ошибка произошла на несколько шагов раньше, при проектировании. Зачем вы меняете эти циферки в клонированном объекте? Их не нужно менять потому, что они вообще не нужны.

[Stalker_RED]

rusgayfer, вот посмотрите на этот вопрос: Как сделать выборку jQuery скрипта по добавлению класса?

Можно решать его добавлением единичек-двоечек к кнопкам, а можно сделать универсальный обработчик для всех блоков этого класса.

Но придется научиться в traversing.

[rusgayfer]

Stalker_RED,

Я нажимаю на кнопку, например, добавить текст. Далее у меня обработчик открывает блок display: block все можно передвигать менять и сохранять. Но проблема в том, что я хочу добавлять сколько угодно таких блоков, меняя только элементы data, чтобы отловить позиционирование. Поэтому я копирую тот же блок и хочу поменять только data элементы. У всех таких виджетов одинаковые data элементы.