Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Changing HTML with jQuery

    I think the title makes sense:

    I want to change this:
    Code:
    <div class="class1 x">
    CONTENT A
    </div>
    
    <div class="class2 x">
    CONTENT B
    </div>
    
    <div class="class3 x">
    CONTENT C
    </div>
    
    <div class="class4">
    CONTENT D
    </div>
    
    <div class="class5">
    CONTENT E
    </div>
    ...to:

    Code:
    <div class="class3 x">
    
      <div class="changed">
      CONTENT A
      </div>
    
      <div class="changed">
      CONTENT B
      </div>
    
      <div class="changed">
      CONTENT C
      </div>
    
    </div>
    
    <div class="class4">
    CONTENT D
    </div>
    
    <div class="class5">
    CONTENT E
    </div>
    So basically the 'x' groups all the content together and merges with the last class holding the 'x'.

    I want to loop through all divs just incase the 'x' classes are not together.

    I always struggle with manipulating HTML with jQuery.
    Last edited by johnsmith153; 10-08-2012 at 07:49 PM.

  • #2
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    You don't have to loop with jQuery. jQuery can make an array (or array-like object) based upon class name. Then you can use removeClass and addClass to alter the classes.

    ie
    Code:
    $('.x')
    will get you all elements that have 'x' as a class.

    Code:
    $('div.x')
    will get you all DIVs that have 'x' as a class.
    Last edited by WolfShade; 10-08-2012 at 07:53 PM.
    ^_^

    If anyone knows of a website that can offer ColdFusion help that isn't controlled by neurotic, pedantic jerks* (stackoverflow.com), please PM me with a link.
    *
    The neurotic, pedantic jerks are not the owners; just the people who are in control of the "popularity contest".

  • #3
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    something like this, I guess...
    Code:
    <script>
    $('div[class*=" x"]').not($('div[class*=" x"]:last')).each(function() {
    $(this).attr("class","changed")
    $('div[class*=" x"]:last').append($(this));
    });
    </script>

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,981
    Thanks
    56
    Thanked 557 Times in 554 Posts
    actually more like this, strictly following the required outcome...

    Code:
    <script>
    $($('div[class*=" x"]').not($('div[class*=" x"]:last')).get().reverse()).each(function() {
    $(this).attr("class","changed")
    $('div[class*=" x"]:last').prepend($(this));
    });
    </script>

  • Users who have thanked xelawho for this post:

    johnsmith153 (10-08-2012)

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks, I really appreciate this. I'll need to look at what each part does as it looks pretty complicated.

    I've actually slightly changed my needs on this, and a different post is here: http://www.codingforums.com/showthread.php?t=275781

    I'm guessing someone will complain about double posting, but they are supposed to be different. (Sorry)

    I'll try and work out how to change it to work for that, but any pointers would help.

    Thanks again.

  • #6
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    Quote Originally Posted by johnsmith153 View Post
    I'm guessing someone will complain about double posting […]
    The only thing I’m complaining right now is that you keep posting your questions in the wrong forum. jQuery is a JavaScript framework/library and therefore belongs into the JS frameworks subforum to which I’ve moved this thread now.

  • Users who have thanked VIPStephan for this post:

    johnsmith153 (10-09-2012)


  •  

    Posting Permissions

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