59057

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

Question:

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?

Answer1:

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.

Recommend

  • 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