Search jQuery

jQuery Forum

replace long html string with new html string??

in Using jQuery • 8 years ago

What's the most best way to do this??
Make the 1st string become the 2nd string??
I don't think any of the DOM manipulation functions would do this??

Actual 1st string:

* Email Address:

Desired 2nd string:

Email Address: *

I know it's string manipulation but I can't think what to use...
If I can get this working for the above then I can do likewise for several more form labels.
Basically it's putting the span containing the asterisk at the end of the string instead of at the beginning.

Thank you, Tom

Replies(11)

Godsbest

Re: replace long html string with new html string??

8 years ago

As long as you can find selectors that provide you with the highest level of specificity, you can use code like the following:

$(function() {
$('span.FormFieldLabel').insertBefore( 'span.Required.FormFieldRequired' );
});

EDIT

Correct code should be:

$(function() {
$('span.FormFieldLabel').each(function() {
$(this).insertBefore( $(this).prev('span.Required.FormFieldRequired') );
});
});

tommls

Re: replace long html string with new html string??

8 years ago

Ohhh...I remembered about before stuff while driving home.

However, is the above code the equivalent of MOVING the span contents??

That is, will the Email Address: within the span also move before the other span??

Meanwhile I'll test this tomorrow when I return to work.

Thank you, Tom

Godsbest

Re: replace long html string with new html string??

8 years ago

Yes.

tommls

Re: replace long html string with new html string??

8 years ago

OIC...learn something new daily...!!

Thank you!! :) tom

tommls

Re: replace long html string with new html string??

8 years ago

Unfortunately this did not work...

It repeated all the form "labels" which are for some reason implemented as definition lists...

I need a way to actually rewrite each of these span things 'on the fly,' they are auto-generated by a php script.

For example, each form lable looks like this within the generated code:

<dt>
	<span class="Required FormFieldRequired" style="visibility: visible">*</span> <span class="FormFieldLabel">Email Address:</span>
	</dt>

I need a way to rewrite each of these so the form field label span precedes the Required span.
There's 11 different dts with different form field label contents and the same requred span.
It's not as efficient but more effective to write 11 very specific statements, any suggestions how I would do this??
Can I expand the before statement suggested above to be a whole string??

I basically want to change 'A before B' to become 'B before A'.

More reading suggests perhaps I need the text() function but it's not clear to me how I apply it.

Thank you, Tom

Godsbest

Re: replace long html string with new html string??

8 years ago

There may be something in your environment that's breaking the code or may be there's something you are doing differently. The code works perfectly on the sample you provided. Perhaps you should include the rest of the other 10 dt elements in the jsfiddle demo and run and see how that turns out:

http://jsfiddle.net/fiddleyetu/ZWPVM/

tommls

Re: replace long html string with new html string??

8 years ago

Please look as the jsfiddle again.
I added two more dt elements.
It's doing the same as happened on the website.
It's putting the text before the asterisk, true, but the asterisk only ever appears once.
I need each phrase plus the asterisk.
I also must figure out getting a blank space before the asterisk but first switching things around must work.
Thank you, Tom

Godsbest

Re: replace long html string with new html string??

8 years ago

Did you save the js fiddle?

I have seen the mistake in my code though, I am sorry for misleading you. It should be:

$(function() {
$('span.FormFieldLabel').each(function() {
$(this).insertBefore( $(this).prev('span.Required.FormFieldRequired') );
});
});

Now add the other dt elements to this demo and see the magic happen: http://jsfiddle.net/fiddleyetu/ZWPVM/3/

tommls

Re: replace long html string with new html string??

8 years ago

The new jsfiddle works, I saved it.

How can I modify this to add a space before the asterisk span??

Another function just like this to put a   before the span.Required.FormFieldRequired??
Or better to do a this insertAfter like this?? following the insert before statement??

$(this).insertAfter( $(this).(' ') ); -- no I tried that it does not work, but this is the general idea, current jsfiddle positions things correctly but for looking nice there should be a space before the asterisk...

Thank you, Tom

Godsbest