CODEWITHSUNDEEP
jquery
Reddy
Reddy

Reputation: 1497

jQuery : Wrap elements inside multiple divs

I have a list of elements (text, inputs, buttons etc...) which parent div structure is same for all.

I want to create a single variable and insert element inside of it.

My actual div structure for all the elements below:

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

In above example only element type div (text-element, button-element etc...) will change

How can I wrap only element types inside one variable Blow is the code which I am trying to do with no luck :(

It is working as expected, but not the proper way I think.

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>

Upvotes: 0

Views: 62

Answers (1)

mplungjan
mplungjan

Reputation: 178401

So you want this:

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>

Looping

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>

Upvotes: 1

Related Questions