CODEWITHSUNDEEP
jqueryhtml
Eko
Eko

Reputation: 1557

Wrapping part of html

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

Answers (4)

Eko
Eko

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

iCollect.it Ltd
iCollect.it Ltd

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

Nageshwar Reddy Pandem
Nageshwar Reddy Pandem

Reputation: 1047

use css selector in jquery like below

$("#foo>*:not(.menu)").wrapAll("<div 'wrapper'></div>");

and check the link here

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82251

You can use:

$('.menu').each(function(){
  $(this).nextAll().wrapAll('<div class="wrapper"></div>')
});

Working Demo

Upvotes: 1

Related Questions