SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    338
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Struggling with jQuery HTML changing

    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>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,312
    Mentioned
    178 Post(s)
    Tagged
    8 Thread(s)
    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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •