SitePoint Sponsor

User Tag List

Results 1 to 2 of 2

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    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,881
    Mentioned
    208 Post(s)
    Tagged
    12 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
  •