change HTML dom tree with Jquery

I'm trying to alter the default layout for my testimonials section on my WordPress website.

At the moment, it outputs the HTML as

<div class="avia-testimonial_inner">
<div class="avia-testimonial-image"></div>
<div class="avia-testimonial-content"></div>
<div class="avia-testimonial-meta"></div>
</div>

Open in new window


What i want is

<div class="avia-testimonial_inner">
<div class="avia-testimonial-image"></div>
<div class="avia-testimonial-meta"></div>
<div class="avia-testimonial-content"></div>
</div>

Open in new window


I have 2 functions,  The first one works and has the image first, but i cannot get the meta class above the content. What am i doing wrong here?

WEBSITE

//------------------------------
// php -  Testimonial image on top
//------------------------------

function move_image_up_custom_script(){
?>
<script>
jQuery(function() {
    jQuery$('.avia-testimonial-image').prependTo($('.avia-testimonial_inner'));
     });
</script>
<?php
}
add_action('wp_footer', 'move_image_up_custom_script');

    

function add_custom_script(){
?>
<script>
jQuery(function() {
    jQuery$('.avia-testimonial-content').appendTo($('.avia-testimonial_inner'));
     });
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Open in new window

Jon ImmsWeb DeveloperAsked:
Who is Participating?
 
Julian HansenCommented:
This should do what you want
function add_custom_script() {
?>
<script>
jQuery(function($) {
	$('.avia-testimonial-meta').each(function(i, e) {
		$(e).prev().before(e);
	});
});
</script>
<?php
}
add_action('wp_footer','add_custom_script');

Open in new window

0
 
leakim971PluritechnicianCommented:
What about : http://api.jquery.com/before/
http://api.jquery.com/insertbefore/
or "after"...

//------------------------------
// php -  Testimonial image on top
//------------------------------

function move_image_up_custom_script(){
?>
<script>
jQuery(function() {
    jQuery$('.avia-testimonial-image').prependTo($('.avia-testimonial_inner'));
     });
</script>
<?php
}
add_action('wp_footer', 'move_image_up_custom_script');

    

function add_custom_script(){
?>
<script>
jQuery(function() {
    jQuery$('.avia-testimonial-content').before($('.avia-testimonial-meta'));
     });
</script>
<?php
}
add_action('wp_footer', 'add_custom_script');

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.