jQuery:将元素包装在多个div中

Question

我有一个元素列表(文本、输入、按钮等(，所有元素的父div结构都是相同的。

我想创建一个单独的变量并在其中插入元素

下面所有元素的实际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>

Answer 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>