Reputation: 1557
I have something like this :
<div id="foo">
<div class="menu"></div>
<a></a>
<p></p>
<div class="foot"></div>
</div>
<div id="bar">
<div class="menu"></div>
<h1></h1>
<div class="foot"></div>
</div>
And I would like something like this the simpliest way possible :
<div id="foo">
<div class="menu"></div>
<div class="wrapper">
<a></a>
<p></p>
<div class="foot"></div>
</div>
</div>
<div id="bar">
<div class="menu"></div>
<div class="wrapper">
<h1></h1>
<div class="foot"></div>
</div>
</div>
(I added two wrappers)
Is this possible using jquery? I wanted to do things like $('#foo .menu').after(''), but I can't add partial html code.
Upvotes: 1
Views: 34
Reputation: 1557
This is my solution, the other solutions proposed by now were not looping over each div :
$('div').each(function(index) {
$('div:nth-child(' + index + ') > :not(.menu)').wrapAll('<div class="wrapper">');
});
Upvotes: 0
Reputation: 93631
Target all the children, but not the menu:
$('#foo >:not(.menu)').wrapAll('<div class="wrapper">');
JSFiddle: http://jsfiddle.net/TrueBlueAussie/qejx0mj4/
I left it as an exercise for the reader, but obvious you could either include both selectors, or use another class and wrap each result in an each:
e.g.
$('#foo >:not(.menu),#bar >:not(.menu)'').wrapAll('<div class="wrapper">');
or add a common class
$('.pickme').each(function(){
$(">:not(.menu)", this).wrapAll('<div class="wrapper">')
});
JSFiddle: http://jsfiddle.net/TrueBlueAussie/qejx0mj4/1/
The last one would be my preference.
Note: You do not need to close single level elements in jQuery
e.g. you can use '<div class="wrapper">'
and not '<div class="wrapper"></div>'
Upvotes: 1
Reputation: 1047
use css selector in jquery like below
$("#foo>*:not(.menu)").wrapAll("<div 'wrapper'></div>");
and check the link here
Upvotes: 1
Reputation: 82251
You can use:
$('.menu').each(function(){
$(this).nextAll().wrapAll('<div class="wrapper"></div>')
});
Upvotes: 1