JQuery .wrap function problem

Question

I can't seem to get this wrap function to work. Its not finding the class and wrapping it. Any ideas?

Not sure what I've done wrong. Any Ideas?

$(document).ready(function() {
$('.greybox').wrap("
<div class='margin'>
<div class='cont_wrapper'>
<div class='border_top'>
<div class='border_right'>
<div class='border_bottom'>
<div class='border_left'>
<div class='tr'>
<div class='tl'>
<div class='br'>
<div class='bl'>
<div class='inner_container'>

</div>        
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
");
}); 

Answer 1

have you tried to do the following

contents = $('<div class="margin">
<div class="cont_wrapper">
<div class="border_top">
<div class="border_right">
<div class="border_bottom">
<div class="border_left">
<div class="tr">
<div class="tl">
<div class="br">
<div class="bl">
<div class="inner_container">
</div></div></div></div></div></div></div></div></div></div></div>');

and then wrap the html around each .graybox?

$('.greybox').wrap(content);

Also make sure your using double quotes for your element attributes.

Answer 2

Ok solved it, as soon as i put it all on one line it works fine. Thanks for the answer though

$(document).ready(function() { 

$('.greybox').wrap("<div class='margin'><div class='cont_wrapper'><div class='border_top'><div class='border_right'><div class='border_bottom'><div class='border_left'><div class='tr'><div class='tl'><div class='br'><div class='bl'><div class='inner_container'></div></div></div></div></div></div></div></div></div></div></div>");

});

Answer 3

You have a few options to fix this, put it on one line:

$('.greybox').wrap("<div class='margin'><div class='cont_wrapper'>...

Or, use \ to indicate that the string goes to the next line, like this:

$('.greybox').wrap(" \
<div class='margin'> \
<div class='cont_wrapper'> \
....

Or, concatenate each line:

$('.greybox').wrap(
"<div class='margin'>" +
"<div class='cont_wrapper'>" +
...