CODEWITHSUNDEEP
jquery
jlrolin
jlrolin

Reputation: 1614

jQuery .Wrap Function Help... wrapping div with another div

var el = widget; // Ordered HTML Lists
var helper = $('<div class="positionHelper"></div>');
var wrapper = $('<div class="slide-out-div"></div>');

helper.css({ position: 'absolute', width: dims.refW, height: dims.refH });
el.wrap(helper);
helper.wrap(wrapper);
wrapper.append('<div id="handle">');

For some reason, the output for this is without the "slide-out-div" DIV or the "handle" DIV. It simply appends the "helper" DIV to the page, but without having the other two divs in there. Any clue why that is?

Trying to achieve:

<div class="slide-out-div">
  <div class="handle"></div>
  <div class="positionHelper">Bunch of Content</div>
</div>

positionHelper will have some CSS variables as you can see, but this is generally what I want to have the output come out as. The problem is that I can't seem to wrap positionHelper with the slide-out-div at all.

UPDATE:

Actually, this works, but seems a bit lengthy for what I'm trying to do.

var h = $(".positionHelper")
h.wrap(wrapper);
var f = $(".positionHelper")
f.before('<div id="handle">');

Upvotes: 2

Views: 392

Answers (2)

user113716
user113716

Reputation: 322452

var helper = $('<div class="positionHelper"></div>');
var wrapper = $('<div class="slide-out-div"></div>');

$('body').append(wrapper);
wrapper.append('<div id="handle"></div>').append(helper);

Upvotes: 1

Hatchware
Hatchware

Reputation: 242

Problem is here, try something like this:

el.wrap(helper.html());
helper.wrap(wrapper.html());

Upvotes: 0

Related Questions