Struggling with jQuery HTML changing

johnsmith153 · 10-08-2012, 08:36 PM

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>

WolfShade · 10-08-2012, 08:42 PM

http://www.codingforums.com/showthread.php?t=275770

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".

johnsmith153 · 10-08-2012, 09:02 PM

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.

xelawho · 10-08-2012, 10:41 PM

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>

johnsmith153 · 10-09-2012, 01:49 AM

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.

johnsmith153 · 10-09-2012, 01:54 AM

I think I've worked out that:

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

...should be:

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

xelawho · 10-09-2012, 02:06 AM

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.