Can I use jQuery .wrap or .wrapInner to wrap around a set of different elements?


I have a HTML structure like so:

<section> <item> <ele class="blue" /> <ele class="green" /> <ele class="red" /> </item> <item> <ele class="blue" /> <ele class="green" /> <ele class="red" /> </item> <item> <ele class="blue" /> <ele class="green" /> <ele class="red" /> </item> </section>

I need to wrap the second two elements inside each <item> in a new div, so that it looks like the following:

<item> <ele class="blue" /> <div class="extra-wrapper"> <ele class="green" /> <ele class="red" /> </div> </item>

Is it possible to use any of the jQuery wrap functions to achieve this? Or is there another way, without having to filter through each item, find the matching elements within, build a new string of HTML and put them back in?


To do this you can loop over each .blue element, get all the following siblings and call wrapAll() on them, like this:

<pre class="snippet-code-js lang-js prettyprint-override">$('.blue').each(function() { $(this).nextAll().wrapAll('<div class="extra-wrapper"></div>'); }); <pre class="snippet-code-css lang-css prettyprint-override">.extra-wrapper { border: 1px solid #C00; } <pre class="snippet-code-html lang-html prettyprint-override"><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <section> <div> <div class="blue">blue</div> <div class="green">green</div> <div class="red">red</div> </div> <div> <div class="blue">blue</div> <div class="green">green</div> <div class="red">red</div> </div> <div> <div class="blue">blue</div> <div class="green">green</div> <div class="red">red</div> </div> </section>

Note that I changed the <ele /> and <item /> element to divs as they were non-standard.


  • reduce/reduce conflicts using ocamlyacc
  • Table striping rows in CSS Grid
  • EntLib Way to Bind “Null” Value to Parameter
  • ZipList with Scalaz
  • abstracting over a collection
  • jQuery: add elements until a particular height is reached
  • Django model inheritance, filtering models
  • Reduction and collapse clauses in OMP have some confusing points
  • Java: can you cast Class into a specific interface?
  • FileReader+canvas image loading problem
  • Installing Hadoop, Java Exception about illegal characters at index 7?
  • Insert into database using onclick function
  • Projection media query: browser support and workarounds?
  • Deselecting radio buttons while keeping the View Model in synch
  • Spring security and special characters
  • Why HTML5 Canvas with a larger size stretch a drawn line?
  • AES padding and writing the ciphertext to a disk file
  • Is possible to count alias result on mysql
  • output of program is not same as passed argument
  • Updating server-side rendering client-side
  • Does CUDA 5 support STL or THRUST inside the device code?
  • How to extract text from Word files using C#?
  • Convert array of 8 bytes to signed long in C++
  • Statically linking a C++ library to a C# process using CLI or any other way
  • jQuery tmpl and DataLink beta
  • Why winpcap requires both .lib and .dll to run?
  • R: gsub and capture
  • AT Commands to Send SMS not working in Windows 8.1
  • retrieve vertices with no linked edge in arangodb
  • How to disable jQuery.jplayer autoplay?
  • Windows forms listbox.selecteditem displaying “System.Data.DataRowView” instead of actual value
  • Benchmarking RAM performance - UWP and C#
  • CSS Applying specific rule for a specific monitor resolution with only CSS is posible?
  • -fvisibility=hidden not passed by compiler for Debug builds
  • Setting background image for body element in xhtml (for different monitors and resolutions)
  • Linking SubReports Without LinkChild/LinkMaster
  • apache spark aggregate function using min value
  • Sorting a 2D array using the second column C++
  • Python/Django TangoWithDjango Models and Databases
  • Net Present Value in Excel for Grouped Recurring CF