Changing HTML with jQuery

johnsmith153 · 10-08-2012, 07:37 PM

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.

WolfShade · 10-08-2012, 07:51 PM

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.

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

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>

xelawho · 10-08-2012, 09:04 PM

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>

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

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.

VIPStephan · 10-08-2012, 10:27 PM

Quote:

Originally Posted by johnsmith153

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.