Changing order of class attributes in <em> tags

Question

I have several tags in my page that look like this:

<em class="itemx item### itemy"> text </em>

where "#" are dynamic numbers.

I want to change it to

<em class="itemx item### itemy itemz"> text </em>

I've tried the following, but to no avail:

 $(".itemx item### itemy").replaceWith("<em class='itemx item### itemy itemz'>" + $(".itemx item### itemy").text() + "</em>");

Can anyone tell me what I'm doing wrong? Or is there a better way?

Cheers.

Answer 1

Presuming that you know what ### is, you should do the following:

$('.itemx.item###.itemy').addClass('itemz');

No need to replace the tags.

If you don't, you might be able to get away with

$('.itemx.itemy').addClass('itemz');

Answer 2

With the code you're trying here...

$(".itemx item### itemy").replaceWith("<em class='itemx item### itemy itemz'>" + $(".itemx item### itemy").text() + "</em>");

...what you're doing is telling jQuery to find an element named itemy inside an element named item### inside any element with the class itemx. Also, you probably want to avoid using .text() for this because it'll convert any HTML inside the <em> into text that'll display, which could cause problems with things like an <abbr> inside of it.

It looks like all you're doing here is adding itemz to the classes, so you could simply do...

$('em.itemx').addClass('itemz');