Geek Answers Handbook

How to wrap individual multiple divs using jQuery

Just tried to work with jQuery wrapInner, and I could not wrap separate multiple divs with an external div.

$('#outer').not('#inner3')
  .wrapInner('<div id="wrapper" style="background:green;"></div>');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id='outer'>
  <div id='inner1'>1</div>
  <div id='inner2'>2</div>
  <div id='inner3'>3</div>
</div>
Run codeHide result

How to wrap inner1 and inner2 inside another div. I tried as above, but it wrapped 3 internal affairs.

Requires conclusion :

<div id='outer'>
  <div id="wrapper" style="background:green;">
    <div id='inner1'>1</div>
    <div id='inner2'>2</div>
  </div>
  <div id='inner3'>3</div>
</div>
Run codeHide result
+4
source share
3 answers

Use .wrapAll():

$('document').ready(function() {
  $('#outer div').not('#inner3')
    .wrapAll('<div id="hey" style="background:green;"></div>');
});

Check out this link for more information.

From the documentation:

Description: Wrap an HTML structure around all elements in a set of matching elements.

.wrapAll (wrappingElement)

wrappingElement

Type: selector or htmlString or element or jQuery

, , HTML jQuery, , .

.wrapAll ()

: Function ( ) => String jQuery

, HTML jQuery . .

+2

$('#outer div').not('#inner3')

$(document).ready(function () {
    $('#outer div').not('#inner3')
        .wrapInner('<div id="hey" style="background:green;"></div>');
});

$('#outer div').not('#inner3') div id outer, id inner3
, , :lt()

$(document).ready(function () {
    $('#outer div:lt(2)')
        .wrapInner('<div id="hey" style="background:green;"></div>');
});

OP

$(document).ready(function () {
    $('#outer div').not('#inner3')
        .wrapAll('<div id="hey" style="background:green;"></div>');
});
+3

:

// wrapInner will add a div *inside each selected node*
$('#outer1 div').not('#inner13')
        .wrapInner('<div id="hey1" style="background:green;"></div>');

// wrap will add one wrapper around *each selected node*
$('#outer2 div').not('#inner23')
        .wrap('<div id="hey2" style="background:green;"></div>');

// to create one single wrapper, and put the divs you want inside,
// you can do as follows :
$('<div id="hey3" style="background:green;"></div>')
    .append( $('#outer3 div').not('#inner33') )
    .prependTo('#outer3');

0

More articles:


All Articles