SitePoint Sponsor

User Tag List

Results 1 to 5 of 5

Hybrid View

  1. #1
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Simple jQuery, changing HTML

    I think I'm half way there. I need to change this HTML with jQuery:

    Code:
    <div class="main-class">
      <div class="div1">
      content 1
      </div>
      <div class="div2">
      content 2
      </div>
    </div>
    
    $("div.main-class").each(function() {
    
      var holder = $(this);
    
      $("> div", holder).each(function(){
    
      //here I need to get entire div, including its contents, and place it before the main-class (and remove the old HTML)
      //holder.before() ???
    
    }
    Which should leave this:
    Code:
    <div class="div1">
    content 1
    </div>
    <div class="div2">
    content 2
    </div>
    <div class="main-class">
    </div>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi there,

    insertBefore() is your friend: http://api.jquery.com/insertBefore/

    Here's an example:
    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 class="main-class">
          Main div
          <div class="div1">Div 1</div>
          <div class="div2">Div 2</div>
        </div>
        
        <script>
          $(document).ready(function() {
            $(".div1, .div2").insertBefore(".main-class");
          });
        </script>
      </body>
    </html>

  3. #3
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great, thanks, but I actually need to do it using the code I posted, as there's a lot more going on that I've stripped out.

    My code needs to take out one at a time.

    So I guess I need insertBefore, but I'm still not sure how that fits in with the code I posted:
    Code:
    $("div.main-class").each(function() {
    
      var holder = $(this);
    
      $("> div", holder).each(function(){
    
        //here I need to get entire div, including its contents, and place it before the main-class (and remove the old HTML)
        holder.insertBefore();
    
      }
    
    }

  4. #4
    SitePoint Addict
    Join Date
    Sep 2008
    Posts
    341
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Got it!

    $(this).insertBefore($(this).parent());

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,056
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    As holder refers to <div class="main-class">, maybe this is better/easier to read:
    Code JavaScript:
    $(this).insertBefore(holder);


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
  •