CODEWITHSUNDEEP
javascriptjqueryhtml
rj487
rj487

Reputation: 4634

jQuery wrapAll two element with variable

I have two variables currentSectionElement and sectionList.

They looks like:

currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");

I want to display it like this:

<div>
    <div>current</div>
    <div>sectionList</div>
<div>

So, I've tried following way:

currentSectionElement.after(sectionList); 
$(currentSectionElement, sectionList).wrapAll('<div></div>');

However it becomes: 

<div>
    <div>current</div>
<div>
<div>sectionList</div>

Upvotes: 1

Views: 553

Answers (3)

Satpal
Satpal

Reputation: 133453

You can use .add() to combine the currentSectionElement and sectionList into a jQuery object then use .wrapAll()

var currentSectionElement = $("<div>current</div>");
var sectionList = $("<div>sectionList</div>");

var newObj = currentSectionElement.add(sectionList);
newObj.wrapAll('<div></div>').parent().appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

You can create another div and use append()

var currentSectionElement = $("<div>current</div>");
var sectionList = $("<div>sectionList</div>");

var newObj = currentSectionElement.add(sectionList);
$('<div>').append(newObj).appendTo(document.body);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 2

T.J. Crowder
T.J. Crowder

Reputation: 1075925

$(currentSectionElement, sectionList) doesn't create a jQuery set containing the intersection of currentSectionElement and sectionList. To do that, you use currentSectionElement.add(sectionList).

If you do that, your wrapAll works:

currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");

currentSectionElement.add(sectionList)
  .wrapAll("<div></div>")
  .parent()
  .appendTo(document.body);
div {
  border: 1px solid black;
  padding: 4px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Upvotes: 1

guradio
guradio

Reputation: 15565

currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");

$('body').append('<div class=red></div>');
$('body').find('div').append(currentSectionElement).append(sectionList)
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Why not append an empty div then in that empty div append both divs

currentSectionElement = $("<div>current</div>");
sectionList = $("<div>sectionList</div>");


$('body').append(currentSectionElement).append(sectionList)
$('body').find('div').wrapAll('<div class=red></div>');
.red{color:red}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

If you want wrap all append both in append then use wrapApp()

Upvotes: 1

Related Questions