Блог

Главная - Вопросы по программированию - jQuery: перенос элементов внутри нескольких разделов

jQuery: перенос элементов внутри нескольких разделов

#jquery

#jquery

Вопрос:

У меня есть список элементов (текст, входные данные, кнопки и т. Д.), родительская структура которых одинакова для всех.

Я хочу создать одну переменную и вставить в нее элемент.

Моя фактическая структура div для всех приведенных ниже элементов:

 <div class="element-container">
  <div class="element-holder">
    <div class="eleement-parent">
      <div class="text-element">Text</div>
    </div>
  </div>
</div>

<div class="element-container">
  <div class="element-holder">
    <div class="eleement-parent">
      <div class="button-element"><input type="button" value="My button"></div>
    </div>
  </div>
</div>

В приведенном выше примере изменится только тип элемента div (текстовый элемент, элемент кнопки и т. Д.).

Как я могу переносить только типы элементов внутри одной переменной Blow — это код, который я безуспешно пытаюсь выполнить: (

Он работает так, как ожидалось, но не так, как я думаю.

 var container_top = '<div class="element-container"><div class="element-holder"><div class="eleement-parent">';
var container_bottom = '</div></div></div>';
var textElement = jQuery(container_top   '<div class="text-element">Text</div>'   container_bottom);
var buttonElement = jQuery(container_top   '<div class="button-element"><input type="button" value="My button"></div>'   container_bottom);
var inputElement = jQuery(container_top   '<div class="input-element"><input type="text" value="My text field"></div>'   container_bottom);

jQuery(textElement).appendTo('.wrapper');
jQuery(buttonElement).appendTo('.wrapper');
jQuery(inputElement).appendTo('.wrapper'); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrapper"></div>

Комментарии:

1. Что это It is working as expected, but not the proper way I think. значит? Чего от этого можно ожидать? Код делает то, что, по вашим словам, он должен делать

2. вместо container_top '<div class="text-element">Text</div>' container_bottom этого я хочу создать элемент как container '<div class="text-element">Text</div>'

3. Я добавил ответ с двумя способами сделать это

Ответ №1:

Итак, вы хотите это:

 const $wrapper = $(".wrapper");
const $container = $('<div class="element-container"><div class="element-holder"><div class="element-parent"></div></div></div>');

const $text = $container.clone();
$text.find(".element-parent").append('<div class="text-element">Text</div>')
const $button = $container.clone();
$button.find(".element-parent").append('<div class="button-element"><input type="button" value="My button"></div>');
const $input = $container.clone();
$input.find(".element-parent").append('<div class="input-element"><input type="text" value="My text field"></div>');

$wrapper.append($text);
$wrapper.append($button);
$wrapper.append($input); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrapper"></div>

Цикл

 const $wrapper = $(".wrapper");
const $container = $('<div class="element-container"><div class="element-holder"><div class="element-parent"></div></div></div>');
$.each(['<div class="text-element">Text</div>',
  '<div class="button-element"><input type="button" value="My button"></div>',
  '<div class="input-element"><input type="text" value="My text field"></div>'
],function(i,elem) { 
  const $wrapped = $container.clone();
  $wrapped.find(".element-parent").append(elem);
  $wrapper.append($wrapped);
}) 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="wrapper"></div>