jQuery wrap所有两个具有变量的元素

Question

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>

Answer 1

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> 

Answer 2

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

Answer 3

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