Struggling with jQuery HTML changing

**johnsmith153** · Oct 8, 2012 13:31

I have really been struggling with this, and also struggling how to explain the question in a forum.

I want jQuery to detect for a class 'x' or 'y' (both need to be possible) which then results in those divs:
(a) being grouped together inside a new div named either 'x' or 'y'
(b) the last element with x or y will have the class names used as the new wrapper div's class.
(c) all original classes with x or y attached removed (classes removed) (except the last one as mentioned in (b) above)
(d) All other attributes (id and data- etc.) to stay with the div they were assigned.

So:

Code:

<div id="id1" data-test="1" class="box class1 x">
AAA
</div>
<div id="id2" data-test="2" class="box class2 x">
BBB
</div>
<div id="id3" data-test="3" class="box class3">
CCC
</div>
<div id="id4" data-test="4" class="box class4 y">
DDD
</div>
<div id="id5" data-test="5" class="box class5 y ">
EEE
</div>

..becomes:

Code:

<div class="box class2 x">

  <div id="id1" data-test="1">
  AAA
  </div>
  <div id="id2" data-test="2">
  BBB
  </div>

</div>

<div id="id3" data-test="3" class="box class3">
CCC
</div>

<div class="box class5 y">

  <div id="id4" data-test="4">
  DDD
  </div>
  <div id="id5" data-test="5">
  EEE
  </div>

</div>

**Pullo** · Oct 9, 2012 10:49

Hi there,

The following should do what you want.
It could probably be optimised a little, but I tried to write it so that it is obvious what is going on where:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Unbenanntes Dokument</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <div id="id1" data-test="1" class="box class1 x">AAA</div>
    <div id="id2" data-test="2" class="box class2 x">BBB</div>
    <div id="id3" data-test="3" class="box class3">CCC</div>
    <div id="id4" data-test="4" class="box class4 y">DDD</div>
    <div id="id5" data-test="5" class="box class5 y ">EEE</div>
    
    <script>
      $(document).ready(function() {
        // Get elements with class of either 'x' or 'y'
        var xDivs = $('.x');
        var yDivs = $('.y');
        
        // Create a container div after the final div with a class of 'x'. Same for 'y' divs
        $('<div id="xDivs"></div>').insertAfter(xDivs.last());
        $('<div id="yDivs"></div>').insertAfter(yDivs.last());
        
        // Give our new div the appropriate class name
        $("#xDivs").addClass(xDivs.last().attr('class'));
        $("#yDivs").addClass(yDivs.last().attr('class'));
        
        //Loop through the 'x' divs and add them to the 'x' div holder, removing the class attribute from each
        xDivs.each(function(){
          $("#xDivs").append($(this));
          $(this).removeAttr("class");
        });	
          
        //Loop through the 'y' divs and add them to the 'y' div holder, removing the class attribute from each
        yDivs.each(function(){
          $("#yDivs").append($(this));
          $(this).removeAttr("class");
        });
      });
    </script>
  </body>
</html>

User Tag List

Thread: Struggling with jQuery HTML changing

Thread Tools

Display

Struggling with jQuery HTML changing

Bookmarks

Bookmarks

Posting Permissions