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 7 of 7
  1. #1
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts

    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
    Regular Coder
    Join Date
    Apr 2012
    Location
    St. Louis, MO
    Posts
    985
    Thanks
    7
    Thanked 101 Times in 101 Posts
    Changing HTML with jQuery

    var x = $('.x');

    x will be all elements with a class of "x".

    var x = $('div.x');

    x will be all DIVs with a class of "x".
    ^_^

    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
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks, but that doesn't help me.

    I sort of knew that.

    The other post is actually different, and somebody has posted a solution, but that's not the same as this question.

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,910
    Thanks
    56
    Thanked 544 Times in 541 Posts
    it's kind of ugly (and includes a sneaky little hack to keep the id3 div in the middle)... I'm sure that someone who actually likes jQuery could do better...
    Code:
    <script>
    $('body').prepend('<div class="'+$('div[class*=" x"]:last').attr("class")+'"></div>')
    $($('div[class*=" x"]').not($('div[class*=" x"]:first')).get().reverse()).each(function() {
    var cl=$(this).attr("class");
    $(this).attr("class",cl.slice(0,cl.length-2))
    $('div[class*=" x"]:first').prepend($(this));
    }); 
    
    $('body').append('<div class="'+$('div[class*=" y"]:last').attr("class")+'"></div>')
    $($('div[class*=" y"]').not($('div[class*=" y"]:last')).get().reverse()).each(function() {
    var cl=$(this).attr("class");
    $(this).attr("class",cl.slice(0,cl.length-2))
    $('div[class*=" y"]:last').prepend($(this));
    });
    </script>
    Last edited by xelawho; 10-09-2012 at 02:06 AM. Reason: because I still cannot spell

  • #5
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Thanks,

    I've tested this script in a much larger site/file.

    It sort of works, but there's two problems:

    (1) It only removes the last two characters of the classes defined. (see point c in first post).

    (2) It moves the content to the wrong place. I think this is because of the $('body').append part but I can't see how to set it to go to the place it should do. I'm guessing if I tested completely stand alone then $('body').append is right as I think that means just inside the <body>, but if the HTML is anywhere else that won't work.

  • #6
    New Coder
    Join Date
    Mar 2012
    Posts
    81
    Thanks
    7
    Thanked 0 Times in 0 Posts
    I think I've worked out that:

    $(this).attr("class",cl.slice(0,cl.length-2))

    ...should be:

    $(this).attr("class", "")

  • #7
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,910
    Thanks
    56
    Thanked 544 Times in 541 Posts
    ah, yeah - I misread the class bit... and had to do the big dancearound as a result

    as for where the new divs end up... well, that's the sneaky little hack I mentioned... in the code shown, one gets put at the start of the body, one gets put at the end, leaving ID3 in the middle . Being that you are basically restructuring the page and moving everything around (but leaving some things where they are, like #id3) you have to decide where the newly created divs should go.

    and then I guess you should give those divs an id and append to them that way, rather than playing around with the $('div[class*=" y"]:last').prepend($(this)); routine, but that's up to you.


  •  

    Posting Permissions

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